1. 添加依赖

在 pubspec.yaml 中添加最新版本（fl_chart）：

dependencies:
  fl_chart: ^1.0.0

示例图：

运行 flutter pub get

示例图

---

2. 折线图（LineChart）

基础折线图

LineChart(
  LineChartData(
    lineBarsData: [
      LineChartBarData(
        spots: const [
          FlSpot(0, 3),
          FlSpot(2, 5),
          FlSpot(4, 1),
          FlSpot(6, 4),
        ],
        isCurved: true,
        color: Colors.blue,
        dotData: FlDotData(show: true),
      ),
    ],
    titlesData: FlTitlesData(
      show: true,
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          interval: 2,
          getTitlesWidget: (value, _) => Text('${value.toInt()}月'),
        ),
      ),
      leftTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          getTitlesWidget: (value, _) => Text('${value.toInt()}K'),
        ),
      ),
    ),
    gridData: FlGridData(show: true),
    borderData: FlBorderData(show: true),
  ),
)

动态更新数据

class _LiveChartState extends State<LiveChart> {
  List<FlSpot> _spots = [];

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() async {
    // 模拟异步数据加载
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      _spots = [
        FlSpot(0, 2),
        FlSpot(1, 5),
        FlSpot(2, 3),
        FlSpot(3, 8),
      ];
    });
  }

  @override
  Widget build(BuildContext context) {
    return LineChart(
      LineChartData(lineBarsData: [
        LineChartBarData(
          spots: _spots,
          color: Colors.green,
        ),
      ]),
    );
  }
}

---

3. 柱状图（BarChart）

基础柱状图

BarChart(
  BarChartData(
    alignment: BarChartAlignment.spaceAround,
    barGroups: [
      BarChartGroupData(
        x: 0,
        barRods: [BarChartRodData(toY: 8, color: Colors.blue)],
      ),
      BarChartGroupData(
        x: 1,
        barRods: [BarChartRodData(toY: 5, color: Colors.red)],
      ),
      BarChartGroupData(
        x: 2,
        barRods: [BarChartRodData(toY: 12, color: Colors.green)],
      ),
    ],
    titlesData: FlTitlesData(
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
          showTitles: true,
          getTitlesWidget: (value, _) => Text(['Q1', 'Q2', 'Q3'][value.toInt()]),
        ),
      ),
    ),
  ),
)

分组柱状图

BarChart(
  BarChartData(
    barGroups: [
      BarChartGroupData(
        x: 0,
        barsSpace: 4,
        barRods: [
          BarChartRodData(toY: 5, color: Colors.blue),
          BarChartRodData(toY: 8, color: Colors.red),
        ],
      ),
      // 更多组数据...
    ],
  ),
)

---

4. 饼图（PieChart）

基础饼图

PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(
        value: 40,
        color: Colors.blue,
        title: '40%',
        radius: 60,
      ),
      PieChartSectionData(
        value: 30,
        color: Colors.green,
        title: '30%',
        radius: 60,
      ),
      PieChartSectionData(
        value: 30,
        color: Colors.orange,
        title: '30%',
        radius: 60,
      ),
    ],
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)

交互式饼图

int touchedIndex = -1;

PieChart(
  PieChartData(
    pieTouchData: PieTouchData(
      touchCallback: (FlTouchEvent event, pieTouchResponse) {
        setState(() {
          touchedIndex = pieTouchResponse?.touchedSection?.touchedSectionIndex ?? -1;
        });
      },
    ),
    sections: List.generate(4, (index) {
      final isTouched = index == touchedIndex;
      return PieChartSectionData(
        value: 25,
        color: isTouched ? Colors.blue[300] : Colors.blue[700],
        radius: isTouched ? 70 : 60,
      );
    }),
  ),
)

---

5. 高级配置

自定义样式

LineChart(
  LineChartData(
    lineTouchData: LineTouchData(
      touchTooltipData: LineTouchTooltipData(
        tooltipBgColor: Colors.blueGrey,
      ),
    ),
    gridData: FlGridData(
      show: true,
      drawVerticalLine: true,
      getDrawingHorizontalLine: (value) => FlLine(
        color: Colors.grey[300]!,
        strokeWidth: 1,
      ),
    ),
    titlesData: FlTitlesData(
      rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    borderData: FlBorderData(
      show: true,
      border: Border.all(color: Colors.black),
  ),
)

多轴支持

LineChart(
  LineChartData(
    extraLinesData: ExtraLinesData(
      horizontalLines: [
        HorizontalLine(
          y: 5,
          color: Colors.red,
          strokeWidth: 2,
          dashArray: [10, 5],
        ),
      ],
    ),
  ),
)

---

6. 常见问题处理

性能优化

// 避免频繁重建图表
class _OptimizedChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const LineChart(
      LineChartData(...), // 使用 const 构造函数
    );
  }
}

空数据处理

if (_data.isEmpty) {
  return Center(child: Text('暂无数据'));
}
return LineChart(...);

手势冲突

LineChart(
  LineChartData(
    lineTouchData: LineTouchData(
      enabled: false, // 禁用触摸交互
    ),
  ),
)

---

7. 完整示例

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

class ChartDashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('数据看板')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            SizedBox(
              height: 200,
              child: LineChart(_createLineChartData()),
            ),
            SizedBox(height: 20),
            SizedBox(
              height: 200,
              child: BarChart(_createBarChartData()),
            ),
          ],
        ),
      ),
    );
  }

  LineChartData _createLineChartData() {
    return LineChartData(
      lineBarsData: [
        LineChartBarData(
          spots: [
            FlSpot(0, 3), FlSpot(2, 5),
            FlSpot(4, 1), FlSpot(6, 4),
          ],
          isCurved: true,
        ),
      ],
      titlesData: FlTitlesData(show: true),
    );
  }

  BarChartData _createBarChartData() {
    return BarChartData(
      barGroups: [
        BarChartGroupData(x: 0, barRods: [BarChartRodData(toY: 8)]),
        BarChartGroupData(x: 1, barRods: [BarChartRodData(toY: 5)]),
      ],
    );
  }
}

---

注意事项

1. 版本兼容性

   • 检查 fl_chart 与 Flutter SDK 的兼容性

   • 定期更新到最新稳定版

2. 复杂图表

   • 对于复杂需求（如蜡烛图），需结合 indicators 和 extraLinesData

3. 响应式设计

   • 使用 LayoutBuilder 实现自适应尺寸：

     LayoutBuilder(
       builder: (context, constraints) {
         return SizedBox(
           width: constraints.maxWidth,
           height: 200,
           child: LineChart(...),
         );
       },
     )

fl_chart 提供了高度可定制的数据可视化解决方案，通过合理组合配置项，可以实现符合 Material Design 规范的专业级图表效果。建议结合官方示例库（fl_chart示例）探索更多高级功能。