Flutter – update fl_chart by a press of a button

Instead putting my Json into the assets folder i put it to the local Documents folder. Like this it works and is ok for me.

Follows de code:

import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ChartPage(),
    );
  }
}

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

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

class ChartPageState extends State<ChartPage> {
  List<DataPoint> dataPoints = [];
  Key chartKey = UniqueKey(); // Create a unique key for the chart.

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

  Future<void> loadChartData() async {
    // Get the documents directory
    final directory = await getApplicationDocumentsDirectory();
    final filePath = '${directory.path}/data.json';

    try {
      // Read the JSON file from the documents directory
      final jsonString = File(filePath).readAsStringSync();
      final jsonData = json.decode(jsonString);

      List<DataPoint> newDataPoints = [];

      for (var item in jsonData) {
        newDataPoints.add(DataPoint(
          day: item['day'],
          value: item['value'],
        ));
      }

      setState(() {
        dataPoints = newDataPoints;
        chartKey = UniqueKey(); // Update the key to rebuild the chart.
      });
    } catch (e) {
      print('Error reading JSON file: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chart Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                loadChartData(); // Reload data when the button is pressed.
              },
              child: const Text('Reload Chart Data'),
            ),
            Expanded(
              child: dataPoints.isNotEmpty
                  ? LineChart(
                      key: chartKey, // Assign the key to the chart.
                      LineChartData(
                        gridData: const FlGridData(show: false),
                        titlesData: const FlTitlesData(show: false),
                        borderData: FlBorderData(show: true),
                        minX: 0,
                        maxX: dataPoints.length.toDouble() - 1,
                        minY: 0,
                        maxY: getMaxYValue(dataPoints),
                        lineBarsData: [
                          LineChartBarData(
                            spots: getDataSpots(dataPoints),
                            isCurved: true,
                            dotData: const FlDotData(show: false),
                          ),
                        ],
                      ),
                    )
                  : const Text('No data available. Press the button to load data.'),
            ),
          ],
        ),
      ),
    );
  }

  List<FlSpot> getDataSpots(List<DataPoint> data) {
    return data
        .asMap()
        .map((index, value) => MapEntry(index.toDouble(), FlSpot(index.toDouble(), value.value.toDouble())))
        .values
        .toList();
  }

  double getMaxYValue(List<DataPoint> data) {
    double maxValue = 0;
    for (var point in data) {
      if (point.value.toDouble() > maxValue) {
        maxValue = point.value.toDouble();
      }
    }
    return maxValue + 10; // Add some padding for a better visualization.
  }
}

class DataPoint {
  final String day;
  final int value;

  DataPoint({required this.day, required this.value});
}