Flutter ListView使用自定义SolidButton时触发空检查运算符错误

问题场景 #

在开发Flutter应用时，使用ListView.separated构建列表项，当将列表项中原本正常运行的TextButton替换为自定义的SolidButton组件后，出现Null check operator used on a null value错误，报错指向ListView；换回TextButton则一切正常。

相关代码 #

ListView实现代码 #

MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: ListView.separated(
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: 3,
        itemBuilder: (context, index) {
          return Padding(
            padding: EdgeInsets.all(8.0),
            child: Container(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(right: 6),
                    child: SquareAvatar(
                        assetLocation: 'assets/images/profile_avatar.png'),
                  ),
                  Padding(
                      padding: EdgeInsets.symmetric(horizontal: 6),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            'Dr. Jose Philips',
                            style: TextStyle(
                                fontSize: AppFontSize.md,
                                color: AppColor.text,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            'General Physician',
                            style: TextStyle(
                                fontSize: AppFontSize.md,
                                color: AppColor.text),
                          ),
                          Text(
                            'Consulted on',
                            style: TextStyle(
                                fontSize: AppFontSize.xs,
                                color: AppColor.primaryBlue,
                                fontStyle: FontStyle.italic),
                          ),
                          Row(
                            children: <Widget>[
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Padding(
                                      padding: EdgeInsets.only(right: 4),
                                      child: Icon(Icons.calendar_today,
                                          color: AppColor.primaryRed)),
                                  Padding(
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 4),
                                    child: Text('Aug 24, 2022'),
                                  )
                                ],
                              ),
                            ],
                          ),
                        ],
                      )),
                  Spacer(flex: 10),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.zero,
                            decoration: BoxDecoration(
                                color: AppColor.veryLightPurple,
                                borderRadius: BorderRadius.circular(30.0)),
                            child: IconButton(
                                onPressed: () => print('pressed'),
                                icon: Icon(Icons.local_hospital,
                                    color: AppColor.secondayPurple)),
                          ),
                          Container(
                            padding: EdgeInsets.zero,
                            decoration: BoxDecoration(
                                color: AppColor.veryLightBlue,
                                borderRadius: BorderRadius.circular(30.0)),
                            child: IconButton(
                                onPressed: () => print('pressed'),
                                icon: Icon(Icons.upload,
                                    color: AppColor.primaryBlue)),
                          ),
                        ],
                      ),
                      // TextButton(
                      //   style: ButtonStyle(
                      //     foregroundColor:
                      //         MaterialStateProperty.all<
                      //             Color>(Colors.blue),
                      //   ),
                      //   onPressed: () {},
                      //   child: Text('TextButton'),
                      // )
                      SolidButton(
                          onTap: () {},
                          text: 'text',
                          color: AppColor.lightBlue)
                    ],
                  ),
                ],
              ),
            ),
          );
        }))

自定义SolidButton组件代码 #

import 'package:flutter/material.dart';
import 'package:nextgen_myhealth_patients/utility/styles/sizes.dart';

class SolidButton extends StatelessWidget {
  const SolidButton(
      {super.key,
      required this.onTap,
      this.color=Colors.white,
      required this.text});

  final VoidCallback onTap;
  final Color color;
  final String text;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: double.infinity,
        decoration:
            BoxDecoration(borderRadius: BorderRadius.circular(5), color: color),
        padding: const EdgeInsets.all(10),
        child: Center(
          child: Text(
            text,
            style: const TextStyle(color: Colors.white, fontSize: AppFontSize.md),
          ),
        ),
      ),
    );
  }
}

问题原因 #

错误的核心在于自定义SolidButton中的Container设置了width: double.infinity，而该组件被嵌套在Row的子层级中（Column → Row）：

• Row组件在水平方向的约束是BoxConstraints.loose，即子组件不能要求无限宽度；
• 当SolidButton的Container设置width: double.infinity时，会导致布局约束冲突，Flutter内部处理这种冲突时触发了空指针检查错误，最终报错指向ListView（因为错误在列表项布局阶段抛出）；
• 内置TextButton默认不会强制占满父容器宽度，而是根据内容自适应，因此不会触发约束冲突。

解决方案 #

修改SolidButton的宽度设置，避免在Row的子层级中使用无限宽度：

方案1：移除width属性，让组件自适应内容 #

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: onTap,
    child: Container(
      // 移除width: double.infinity
      decoration:
          BoxDecoration(borderRadius: BorderRadius.circular(5), color: color),
      padding: const EdgeInsets.all(10),
      child: Center(
        child: Text(
          text,
          style: const TextStyle(color: Colors.white, fontSize: AppFontSize.md),
        ),
      ),
    ),
  );
}

方案2：设置固定宽度 #

如果需要按钮有固定宽度，直接指定具体数值：

width: 100, // 替换double.infinity为具体宽度值

方案3：用IntrinsicWidth包裹（适合需要内容自适应但保持统一宽度的场景） #

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: onTap,
    child: IntrinsicWidth(
      child: Container(
        width: double.infinity,
        decoration:
            BoxDecoration(borderRadius: BorderRadius.circular(5), color: color),
        padding: const EdgeInsets.all(10),
        child: Center(
          child: Text(
            text,
            style: const TextStyle(color: Colors.white, fontSize: AppFontSize.md),
          ),
        ),
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者fahim irfan