卡片中的圆环图

Question

我正在尝试为我的项目实现 UI，但在使用同步融合圆形图表类型时陷入困境。我想在卡片小部件中创建圆形图表。但我遇到了与边界相关的异常，但我无法弄清楚。这是我正在尝试创建的内容：

这是我的错误输出：

编辑：这是我的代码示例：

Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
          side: BorderSide(color: Colors.blueGrey, width: 0.5),
        ),
        child: Expanded(
          child: Container(
            height: MediaQuery.of(context).size.height * .65,
            width: MediaQuery.of(context).size.width * .80,
            child: Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "Genel Durum",
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.black,
                      letterSpacing: 0.3,
                    ),
                  ),
                ),
                Divider(
                  color: Colors.grey,
                  thickness: 0.3,
                  endIndent: 10,
                  indent: 10,
                ),
                _buildChart(),
              ],
            ),
          ),
        ),
      ),

Widget _buildChart() {
    return Container(
      child: SfCircularChart(series: <CircularSeries>[
        DoughnutSeries<ChartData, String>(
            dataSource: chartData,
            pointColorMapper: (ChartData data, _) => data.color,
            xValueMapper: (ChartData data, _) => data.name,
            yValueMapper: (ChartData data, _) => data.age,
            // Radius of doughnut
            radius: '10%')
      ]),
    );
  }

感谢您的所有帮助！

Answer 1

扩展小部件必须是后代或父级

使应用程序崩溃或显示空白屏幕等

这会崩溃，因为 Expanded 不是小部件的父级

Container(
  child: Expanded(
    child: MyWidget(),
  ),
)

排

Row(
  children: [
    Expanded(
      child: MyWidget(),
    ),
    Expanded(
      child:Text("Text Widget"),
    ),
  ],
)

在专栏中

Column(
  children: [
    Expanded(
      child: MyWidget(),
    ),
    Expanded(
      child:Text("Text Widget"),
    ),
  ],
),

查看官方 flutter Expanded Widget

另请查看以下博客。非常适合 flutter

Flutter 布局演练：行、列、堆栈、扩展、填充 这是非常好的教程，Andrea Bizzotto 很容易解释

重新编码

填充堆栈

flutter 教程的 Github 链接