Fl Chart Theme-aware (maybe 0.40.0)

main.dart

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isDarkTheme = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: _isDarkTheme ? Brightness.dark : Brightness.light,
      ),
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(18),
          child: Column(
            children: [
              Expanded(
                child: GridView(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 30,
                    crossAxisSpacing: 30,
                  ),
                  children: [
                    ChartHolder(child: MyLineChart()),
                    ChartHolder(child: MyBarChart()),
                    ChartHolder(child: MyPieChart()),
                    ChartHolder(child: MyScatterChart()),
                    ChartHolder(child: MyRadarChart()),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Light'),
                  Switch(
                    value: _isDarkTheme,
                    onChanged: (newValue) {
                      setState(() {
                        _isDarkTheme = newValue;
                      });
                    },
                  ),
                  Text('Dark'),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

class ChartHolder extends StatefulWidget {
  final Widget child;

  const ChartHolder({Key? key, required this.child}) : super(key: key);

  @override
  _ChartHolderState createState() => _ChartHolderState();
}

class _ChartHolderState extends State<ChartHolder> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(18),
      child: widget.child,
    );
  }
}

class MyRadarChart extends StatelessWidget {
  const MyRadarChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RadarChart(RadarChartData(dataSets: [
      RadarDataSet(
        dataEntries: [
          RadarEntry(value: 10),
          RadarEntry(value: 8),
          RadarEntry(value: 12),
        ],
      ),
      RadarDataSet(
        dataEntries: [
          RadarEntry(value: 4),
          RadarEntry(value: 5),
          RadarEntry(value: 3),
        ],
      )
    ]));
  }
}

class MyPieChart extends StatelessWidget {
  const MyPieChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PieChart(PieChartData(sections: [
      PieChartSectionData(value: 8),
      PieChartSectionData(value: 10),
      PieChartSectionData(value: 3),
      PieChartSectionData(value: 6),
    ]));
  }
}

class MyScatterChart extends StatelessWidget {
  const MyScatterChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScatterChart(ScatterChartData(
      scatterSpots: [
        ScatterSpot(1, 5, radius: 10),
        ScatterSpot(5, 3, radius: 10),
        ScatterSpot(3, 7, radius: 10),
        ScatterSpot(2, 1, radius: 10),
        ScatterSpot(8, 2, radius: 10),
        ScatterSpot(8, 8, radius: 10),
      ],
      minX: 0,
      maxX: 10,
      minY: 0,
      maxY: 10,
    ));
  }
}

class MyLineChart extends StatelessWidget {
  const MyLineChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LineChart(LineChartData(lineBarsData: [
      LineChartBarData(spots: [
        FlSpot(0, 0),
        FlSpot(1, 1),
        FlSpot(2, 2),
        FlSpot(3, 1),
        FlSpot(4, 3),
      ])
    ]));
  }
}

class MyBarChart extends StatelessWidget {
  const MyBarChart({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BarChart(BarChartData(barGroups: [
      BarChartGroupData(x: 0, barRods: [BarChartRodData(y: 10)]),
      BarChartGroupData(x: 1, barRods: [BarChartRodData(y: 8)]),
      BarChartGroupData(x: 2, barRods: [BarChartRodData(y: 18)]),
    ]));
  }
}

fl_chart_theme_aware.mov