Flutter 颤振水平条形图

我试图在颤振中实现一个水平条形图。我偶然发现了这些包裹，上面有图表，上面有飘动的图表。但我需要定制的外观，以配合以下图片我附加。 如果有任何一位冠军能支持我，给我提供如何实现这一目标的步骤，或者一个示范性的代码将非常有帮助。 事先非常感谢你。

用于知道可能的宽度，并计算标题和数字的位置，但同时不要收缩长标题文本

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _title('Food Weight(grams)'),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChartLine(title: 'Fat', number: 1800, rate: 1),
                ChartLine(title: 'Protein', number: 600, rate: 0.4)
              ],
            ),
          ),
          _title('Ratios'),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChartLine(
                  title: 'Calculum/Phosporous ratio = 2:1',
                  rate: 0.5,
                ),
                ChartLine(
                  title: 'Omega3/6 ratio = 1:4',
                  rate: 0.4,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _title(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0, top: 4),
      child: Text(
        title,
        style: TextStyle(fontSize: 18),
      ),
    );
  }
}

class ChartLine extends StatelessWidget {
  const ChartLine({
    Key key,
    @required this.rate,
    @required this.title,
    this.number,
  })  : assert(title != null),
        assert(rate != null),
        assert(rate > 0),
        assert(rate <= 1),
        super(key: key);

  final double rate;
  final String title;
  final int number;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final lineWidget = constraints.maxWidth * rate;
      return Padding(
        padding: const EdgeInsets.only(bottom: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              constraints: BoxConstraints(minWidth: lineWidget),
              child: IntrinsicWidth(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 18,
                      ),
                    ),
                    if (number != null)
                      Text(
                        number.toString(),
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                  ],
                ),
              ),
            ),
            Container(
              color: Colors.blue,
              height: 60,
              width: lineWidget,
            ),
          ],
        ),
      );
    });
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：脚手架(
正文：安全区(
子：MyHomePage（），
),
),
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回填充(
填充：常数边集全部（10.0），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
_标题（“食物重量（克）”，
填充物(
填充：仅限常量边集（左：20），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
图表线（标题：“Fat”，编号：1800，费率：1），
图表线（标题：“蛋白质”，编号：600，比率：0.4）
],
),
),
_标题（“比率”），
填充物(
填充：仅限常量边集（左：20），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
海图线(
标题：“结石/磷孔隙率=2:1”，
比率：0.5，
),
海图线(
标题：“Omega3/6比值=1:4”，
比率：0.4，
),
],
),
),
],
),
);
}
小部件标题（字符串标题）{
返回填充(
填充：仅限常量边集（底部：8.0，顶部：4），
子：文本(
标题
样式：TextStyle（字体大小：18），
),
);
}
}
类ChartLine扩展了无状态小部件{
恒海图线({
关键点，
@需要这个价格，
@需要这个标题，
这个号码，
})：assert（title！=null），
断言（速率！=null），
断言（速率>0），
assert（rate您可以使用Syncfusion的颤振图包，就像我现在在应用程序中使用的一样。使用Syncfusion的Sfartesianchart小部件，将条形图与数据标签一起呈现，通过更改数据标签的默认位置，可以实现输出。该小部件在Android、iOS和web平台上工作


包装-
特征-
文件-
非常感谢你，Kherre，这太棒了，我从你的帮助中学到了很多。现在我正在尝试制作条形图的动画。