编写Flutter Dart页面代码时报错无输出，该如何排查解决？

核心问题排查 #

• Expanded组件使用错误：Expanded仅能作为Row、Column、Flex组件的直接子节点，你代码中将Expanded放在ElevatedButton的child属性中，会直接触发布局异常，这是最核心的报错原因
• 资源未正确配置：需要确认项目根目录下pubspec.yaml文件中已声明assets资源路径，否则所有本地图片都会加载失败
• 固定宽高适配问题：大量写死的组件宽高数值，会导致不同屏幕尺寸的设备显示效果和预期差异大，甚至出现水平溢出警告
• 无滚动容器：最外层Column未包裹滚动容器，当内容超过屏幕高度时会出现垂直溢出警告
• 底部按钮布局逻辑错误：两个按钮未做宽度分配，会出现排版错乱

修复步骤 #

1. 修正Expanded的使用位置，将其放在底部Row的直接子节点位置，用于分配两个按钮的宽度占比
2. 在pubspec.yaml的flutter节点下添加资源声明：

flutter:
  uses-material-design: true
  # 新增资源路径声明
  assets:
    - images/

3. 外层添加SafeArea避免内容贴到系统状态栏，添加SingleChildScrollView处理滚动溢出
4. 用自适应宽度（double.infinity、Expanded）代替固定宽高，提升多设备适配性
5. 统一调整组件间距，减少冗余的padding代码

修复后完整代码 #

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Align(
                  alignment: Alignment.topRight,
                  child: CircleAvatar(
                    radius: 30,
                    backgroundImage: AssetImage('images/image.jpeg'),
                  ),
                ),
                const SizedBox(height: 20),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: const Color(0xff0277bd)),
                  width: double.infinity,
                  height: 120,
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: const [
                        Padding(
                          padding: EdgeInsets.fromLTRB(10, 30, 0, 15),
                          child: Text(
                            "New way to pay",
                            style: TextStyle(fontSize: 25, color: Colors.white),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Text(
                            "Try Uber Cash->",
                            style: TextStyle(fontSize: 18, color: Colors.white),
                          ),
                        ),
                      ]),
                ),
                const SizedBox(height: 20),
                Row(
                  children: [
                    Expanded(
                      child: Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.grey[200]),
                          height: 120,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Padding(
                                padding: const EdgeInsets.fromLTRB(80, 0, 5, 10),
                                child: Image.asset(
                                  'images/carIcon.png',
                                  width: 80,
                                  height: 80,
                                ),
                              ),
                              const Padding(
                                padding: EdgeInsets.only(left: 12),
                                child: Text(
                                  "Ride",
                                  style: TextStyle(
                                    fontSize: 20,
                                  ),
                                ),
                              ),
                            ],
                          )),
                    ),
                    const SizedBox(width: 20),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.grey[200]),
                        height: 120,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: const EdgeInsets.fromLTRB(80, 0, 5, 10),
                              child: Image.asset(
                                'images/box.png',
                                width: 80,
                                height: 80,
                              ),
                            ),
                            const Padding(
                              padding: EdgeInsets.only(left: 12),
                              child: Text(
                                "Packages",
                                style: TextStyle(
                                  fontSize: 20,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 15),
                Row(
                  children: [
                    Expanded(
                      flex: 2,
                      child: ElevatedButton(
                          style: ButtonStyle(
                              padding: MaterialStateProperty.all(const EdgeInsets.symmetric(vertical: 12)),
                              backgroundColor:
                              MaterialStateProperty.all(Colors.grey[300])),
                          onPressed: () {},
                          child: const Text(
                            "Enter pickup point",
                            style: TextStyle(fontSize: 22, color: Colors.black),
                          )),
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      flex: 1,
                      child: ElevatedButton(
                          style: ButtonStyle(
                            padding: MaterialStateProperty.all(const EdgeInsets.symmetric(vertical: 12)),
                            backgroundColor: MaterialStateProperty.all(Colors.grey[300]),
                          ),
                          onPressed: () {},
                          child: const ListTile(
                            contentPadding: EdgeInsets.zero,
                            leading: Image(
                              image: AssetImage('images/clock.png'),
                              width: 20,
                              height: 20,
                            ),
                            title: Text(
                              "Now",
                              style: TextStyle(color: Colors.black, fontSize: 14),
                            ),
                            trailing: Icon(Icons.arrow_drop_down, color: Colors.black),
                          )
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Safiullah Parvez Memon