如何使条形图从下到上开始颤动？答案

【问题标题】：How to make the bar chart starts from the bottom to top in flutter?如何使条形图从下到上开始颤动？
【发布时间】：2020-07-22 19:22:31
【问题描述】：

我想让条形图从下到上开始颤动，因为我的条形图是从上到下开始的，这给用户留下了不好的影响。那么，如何让条形图从下往上开始颤动呢？

下面是条形图的两个小部件，我只是将它们分散到两个不同的文件中。

     print('build() ChartBar');
    return LayoutBuilder(builder: (ctx, constraints) {
      return 
      Column(
        children: <Widget>[
          Container(
            height: constraints.maxHeight * 0.15,
            child: FittedBox(
              child: Text('\$${spendingAmount.toStringAsFixed(0)}'),
            ),
          ),
          SizedBox(
            height: constraints.maxHeight * 0.05,
          ),
          Container(
            height: constraints.maxHeight * 0.6,
            width: 10,
            child: Stack(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey, width: 1.0),
                    color: Color.fromRGBO(220, 220, 220, 1),
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                FractionallySizedBox(
                    heightFactor: spendingPercentageOfTotal,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.purple,
                        borderRadius: BorderRadius.circular(10),
                      ),
                    )),
              ],
            ),
          ),
          SizedBox(
            height: constraints.maxHeight * 0.05,
          ),
          Container(
            height: constraints.maxHeight * 0.15,
            child: FittedBox(
              child: Text(label),
            ),
          )
        ],
      );
    });
  }
}

Widget build(BuildContext context) {
    print('build() Chart');
    return Card(
      elevation: 6,
      margin: EdgeInsets.all(10),
      child: Container(
        padding: EdgeInsets.all(8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: groupedTransactionValues.map(
            (data) {
              return Flexible(
                  fit: FlexFit.tight,
                  child: ChartBar(
                      data['day'],
                      data['amount'],
                      totaLSpending == 0.0
                          ? 0.0
                          : (data['amount'] as double) / totaLSpending));
            },
          ).toList(),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart widget bar-chart

【解决方案1】：

您可以在下面使用此代码。 Flutter 默认是从上到下。您可以使用 Align 小部件来更改它。

Align(
                alignment: Alignment.bottomCenter,
                child: FractionallySizedBox(....),
)

【讨论】：

【解决方案2】：

简单的方法是使用依赖项

https://pub.dev/packages/fl_chart

【讨论】：

【解决方案3】：

将此添加到堆栈小部件中

alignment: AlignmentDirectional.bottomStart,

【讨论】：