Flutter自定义Widget放入Column后无法显示的问题求助

问题原因 #

你的自定义Widget使用了FractionallySizedBox，它的heightFactor依赖父容器的明确高度约束。但在Column布局中，默认情况下子Widget的垂直方向没有强制约束，FractionallySizedBox无法获取有效高度参考，导致布局计算异常，最终整个Column的内容都无法渲染。另外也需要排查linechartData()是否返回了无效的LineChartData，导致LineChart渲染失败。

解决方案 #

方案1：用Expanded包裹自定义Widget #

让Chart占据Column中剩余的可用空间，给FractionallySizedBox提供明确的高度约束：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("hello"),
        ),
        body: Container(
            child: Column(
          children: [
            Container(child: Text("hello")),          
            Expanded(child: Chart())
          ],
        )),
      ),
    );
  }
}

方案2：给外层Container设置明确高度 #

通过MediaQuery获取屏幕可用高度，让FractionallySizedBox有明确的参考高度：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    final appBarHeight = AppBar().preferredSize.height;
    final screenHeight = MediaQuery.of(context).size.height;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("hello"),
        ),
        body: Container(
          height: screenHeight - appBarHeight - MediaQuery.of(context).padding.top,
          child: Column(
            children: [
              Container(child: Text("hello")),          
              Chart()
            ],
          ),
        ),
      ),
    );
  }
}

方案3：排查LineChart数据是否有效 #

先将自定义Widget中的LineChart替换为简单容器测试，确认是否是图表数据的问题：

@override
Widget build(BuildContext context) {
  return FractionallySizedBox(
    widthFactor: 1,
    heightFactor: 0.3,
    child: Container(
      color: Colors.red,
      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
    ),
  );
}

如果红色容器能正常显示，说明问题出在linechartData()函数，需要检查它返回的LineChartData是否正确，比如是否为空、数据格式错误等。

内容的提问来源于stack exchange，提问作者gemchu geme