Flutter代码异常求助：空值报错与内容不渲染问题排查

问题现象 #

• AppBar修复后正常显示，但下方内容完全无法渲染
• 触发空值非空要求报错
• 此前曾出现父组件错误、无边界错误，已修复AppBar格式问题

错误原因分析 #

1. BullBearIndicator的Key参数违规：组件构造函数要求required Key key，但调用时传入key: null，违反非空约束，直接导致组件初始化失败，中断整个body渲染流程
2. 布局嵌套逻辑错误：
   • Expanded直接嵌套在Align内部，而Expanded必须作为Column/Row/Flex的直接子组件才能正确获取可用空间
   • Row中嵌套WebhookDataList（推测为列表类组件），水平布局内放置无约束的列表会触发水平方向无边界错误
3. 冗余布局代码：空的Padding组件无实际作用，徒增布局层级

修复步骤 #

1. 修正BullBearIndicator的Key参数 #

将组件构造函数的required Key key改为Key? key（允许空值），符合Flutter组件设计规范；调用时可直接省略key参数，使用默认的null值

2. 调整布局嵌套结构 #

• 将Expanded从Align中移出，作为Column的直接子组件，Align放在Expanded内部包裹ListView
• 将WebhookDataList从Row中移出，作为ListView的单独列表项，避免水平布局内嵌套列表组件

3. 清理冗余代码 #

用SizedBox替代空的Padding组件，简化布局层级

修复后的完整代码 #

main.dart #

import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'widgets/alertsfeeddata.dart';
import 'widgets/bullbearindicator.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Padding(
            padding: const EdgeInsets.all(75),
            child: Image.asset('assets/logos/1.png'),
          ),
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(5),
            child: Container(
              color: Colors.black,
              height: 5,
              child: Container(
                decoration: const BoxDecoration(
                  border: Border(
                    bottom: BorderSide(width: 5, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
        ),
        backgroundColor: Colors.black,
        body: Column(
          children: <Widget>[
            const BullBearIndicator(),
            Expanded(
              child: Align(
                child: ListView(children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        CircularPercentIndicator(
                          radius: 45.0,
                          lineWidth: 4.0,
                          percent: 0.10,
                          center: const Text("10%"),
                          backgroundColor: Colors.red,
                          progressColor: Colors.green,
                        ),
                        const SizedBox(width: 10),
                        CircularPercentIndicator(
                          radius: 45.0,
                          lineWidth: 4.0,
                          percent: 0.30,
                          center: const Text("30%"),
                          progressColor: Colors.orange,
                        ),
                        const SizedBox(width: 10),
                        CircularPercentIndicator(
                          radius: 45.0,
                          lineWidth: 4.0,
                          percent: 0.60,
                          center: const Text("60%"),
                          progressColor: Colors.yellow,
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(30.0),
                    child: WebhookDataList(),
                  ),
                ]),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

BullBearIndicator.dart #

import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';

class BullBearIndicator extends StatelessWidget {
  final double totAggr;
  final double btc;
  final double eth;
  final double alt;

  const BullBearIndicator({
    Key? key,
    this.totAggr = 0.88,
    this.btc = 0.71,
    this.eth = 0.71,
    this.alt = 0.78,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CircularPercentIndicator(
      radius: 130.0,
      animation: true,
      animationDuration: 1200,
      lineWidth: 15.0,
      percent: totAggr,
      center: CircularPercentIndicator(
        radius: 108.0,
        lineWidth: 12.5,
        animation: true,
        percent: btc,
        center: CircularPercentIndicator(
          radius: 90.0,
          lineWidth: 12.5,
          animation: true,
          percent: eth,
          center: CircularPercentIndicator(
            radius: 72,
            lineWidth: 12.5,
            percent: alt,
            center: totAggr > 0.51
                ? Image.asset('assets/logos/bull.png')
                : Image.asset('assets/logos/bear.png'),
            backgroundColor: Colors.red,
            progressColor: Colors.green,
          ),
          circularStrokeCap: CircularStrokeCap.butt,
          backgroundColor: Colors.red,
          progressColor: Colors.green,
        ),
        circularStrokeCap: CircularStrokeCap.butt,
        backgroundColor: Colors.red,
        progressColor: Colors.green,
      ),
      footer: const Text(
        "BULL/BEAR",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
      ),
      circularStrokeCap: CircularStrokeCap.round,
      backgroundColor: Colors.red,
      progressColor: Colors.green,
    );
  }
}

内容的提问来源于stack exchange，提问作者Adam Marc