Flutter中fl_chart柱状图适配卡片与加载动画问题求助

1. 让柱状图适配Card组件 #

FlChart的BarChart需要明确的尺寸约束才能正确适配父容器，直接嵌套在Card里会因为约束不足导致布局异常。可以通过以下步骤解决：

• 用LayoutBuilder获取Card的可用尺寸，动态传递给BarChart
• 给Card的子组件添加合适的内边距，避免图表边缘被Card裁剪
• 结合Container或SizedBox给BarChart设置明确的宽高（或使用double.infinity占满可用空间）

2. 实现页面加载时的图表动画 #

利用Flutter的AnimationController和AnimatedBuilder，配合FlChart的BarChartData动态更新柱状图的高度值，实现从0到目标值的过渡动画（负值则从0向下过渡）：

• 创建AnimationController控制动画时长
• 定义tween动画值，从0过渡到1，再将该值映射到柱状图的目标数值
• 在AnimatedBuilder中构建BarChart，根据动画值实时更新每个Bar的高度

完整可复现代码 #

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bar Chart Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const BarChartPage(),
    );
  }
}

class BarChartPage extends StatefulWidget {
  const BarChartPage({super.key});

  @override
  State<BarChartPage> createState() => _BarChartPageState();
}

class _BarChartPageState extends State<BarChartPage> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  // 正负值的模拟数据
  final List<double> _data = [3, -2, 5, -4, 6, -1];

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，时长1.5秒
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
    );
    // 创建从0到1的动画曲线
    _animation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeOutQuad,
    );
    // 启动动画
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('正负值柱状图')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Card(
          elevation: 4,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            // 使用LayoutBuilder获取Card的可用尺寸
            child: LayoutBuilder(
              builder: (context, constraints) {
                return AnimatedBuilder(
                  animation: _animation,
                  builder: (context, child) {
                    return BarChart(
                      BarChartData(
                        barTouchData: BarTouchData(enabled: false),
                        alignment: BarChartAlignment.spaceAround,
                        maxY: 7,
                        minY: -5,
                        gridData: FlGridData(
                          show: true,
                          drawVerticalLine: false,
                          getDrawingHorizontalLine: (value) => FlLine(
                            color: Colors.grey.shade300,
                            strokeWidth: 1,
                          ),
                        ),
                        titlesData: FlTitlesData(
                          show: true,
                          bottomTitles: AxisTitles(
                            sideTitles: SideTitles(
                              showTitles: true,
                              getTitlesWidget: (value, meta) => Text('${value.toInt() + 1}'),
                            ),
                          ),
                          leftTitles: AxisTitles(
                            sideTitles: SideTitles(showTitles: true),
                          ),
                        ),
                        borderData: FlBorderData(show: false),
                        barGroups: _data.asMap().entries.map((entry) {
                          final index = entry.key;
                          final value = entry.value;
                          // 根据动画值计算当前显示的数值
                          final animatedValue = value * _animation.value;
                          return BarChartGroupData(
                            x: index,
                            barRods: [
                              BarChartRodData(
                                toY: animatedValue,
                                color: animatedValue >= 0 ? Colors.green : Colors.red,
                                width: 20,
                                borderRadius: const BorderRadius.only(
                                  topLeft: Radius.circular(4),
                                  topRight: Radius.circular(4),
                                ),
                              ),
                            ],
                          );
                        }).toList(),
                      ),
                      // 设置图表尺寸
                      size: Size(constraints.maxWidth, constraints.maxHeight),
                    );
                  },
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 适配Card：通过LayoutBuilder获取Card的可用宽高，传递给BarChart的size参数，同时给Card内部添加Padding避免图表边缘被裁剪
• 加载动画：利用AnimationController控制动画进度，将动画值与原始数据相乘，实现柱状图从0到目标值的平滑过渡，正负值分别向上下方向动画
• 代码中使用Curves.easeOutQuad让动画效果更自然，可根据需求调整动画时长和曲线

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