卡片中的甜甜圈图

Question

我正在尝试为我的项目实施 UI，但在使用 syncfusion 圆形图表类型时卡住了。我想在卡片小部件中创建一个圆形图表。但是我遇到了与边界相关的异常，我想不通。这是我要创建的内容：

这是我的错误输出：

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

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"),
    ),
  ],
),

结帐官方扑Expanded Widget

还可以查看 blogs.very 对 flutter 有好处

Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding 这是非常好的教程，Andrea Bizzotto

很容易解释

Resocode

FilledStack

Github link for flutter tutorial

Answer 2

尝试删除 Expanded 并使用下面的代码

Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
          side: BorderSide(color: Colors.blueGrey, width: 0.5),
        ),
          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(
    height: MediaQuery.of(context).size.height * .65,
    width: MediaQuery.of(context).size.width * .80,
      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 3

要解决报告的问题，您可以使用 Expanded 小部件作为父级包装我们的图表小部件，其他使用 Container 包装图表小部件] 并将大小（高度和宽度）指定为相同。修改后的代码如下，

    Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(color: Colors.blueGrey, width: 0.5),
      ),
      child: Center(
        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() {
  //Here we have wrapped our chart with Expanded widget
  return Expanded(
    child: SfCircularChart(series: <CircularSeries>[
      DoughnutSeries<ChartData, String>(
          dataSource: [
            ChartData(Colors.greenAccent, 'hi', 100),
            ChartData(Colors.blueAccent, 'to', 100)
          ],
          pointColorMapper: (ChartData data, _) => data.color,
          xValueMapper: (ChartData data, _) => data.name,
          yValueMapper: (ChartData data, _) => data.age,
          // Radius of doughnut
          radius: '30%')
    ]),
  );
}

卡片中的甜甜圈图

Doughnut Chart in Card

mobile

syncfusion

dart

flutter