How to Manage State in Syncfusion Flutter Charts Using Riverpod?

Introduction

In this article, we will demonstrate how to use Riverpod for state management in Syncfusion® Flutter Charts. Riverpod is a powerful and flexible state management library for Flutter, and when combined with Syncfusion® rich charting capabilities, it provides an efficient way to manage the state of chart series and chart properties.

Specifically, this guide will explain how to:

• Maintain and change the selected chart type (Line Series or Column Series).

• Dynamically update the line series color using Riverpod.

By the end of this article, you will understand how to integrate Riverpod into a Flutter app with Syncfusion® Flutter Charts, ensuring that the chart updates based on user interactions while maintaining its state across different components.

Step 1: Setting Up Riverpod and Syncfusion® Flutter Charts

Before diving into the implementation, let’s first set up the required packages for Riverpod and Syncfusion® Flutter Charts in Flutter project.

1. Add dependencies

In your pubspec.yaml file, include the following dependencies:

dependencies:
 flutter:
   sdk: flutter
 syncfusion_flutter_charts: ^xxxx
 flutter_riverpod: ^xxx

Run flutter pub get to install these dependencies.

2. Import required Packages

Import the necessary packages in your Dart file:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:syncfusion_flutter_charts/charts.dart'; 

Step 2: State Management with Riverpod

Now, let’s explore how to use Riverpod’s to control the chart’s series type and color dynamically.

1. Define an enum for chart series type

We define an enum to manage the available chart series types:

enum ChartSeriesType { line, column } 

2. Create state notifiers

We will use StateNotifier to manage mutable state in Riverpod . Two StateNotifiers are created:

• ChartSeriesNotifier - Manages the selected chart series type.
• LineColorNotifier - Manages the color of the line series.

The ChartSeriesNotifier manages the state of the selected chart series type. By default, the chart will use the line series type.

class ChartSeriesNotifier extends StateNotifier<ChartSeriesType> {
 ChartSeriesNotifier() : super(ChartSeriesType.line); // Default series.
 
/// Updates the series type.
 void updateSeries(ChartSeriesType newSeries) {
   state = newSeries;
 }
} 

The LineColorNotifier manages the state of the line color. Initially, it is set to blue.

class LineColorNotifier extends StateNotifier<Color> {
 LineColorNotifier() : super(Colors.blue); // Default color.
 
/// Updates the line color.
 void updateColor(Color newColor) {
   state = newColor;
 }
} 

3. Defining providers

Providers are used to expose the state to the widget tree. We create two providers:

• StateNotifierProvider: This type of provider is used to expose a StateNotifier to the widget tree. The chartSeriesProvider and lineColorProvider allow other widgets to read and modify their states.
• chartSeriesProvider: Provides the current chart series type.
• lineColorProvider: Provides the current color for the line series.

// Provider for the selected chart series type.
final StateNotifierProvider<ChartSeriesNotifier, ChartSeriesType>
   chartSeriesProvider =
   StateNotifierProvider<ChartSeriesNotifier, ChartSeriesType>(
 (ref) => ChartSeriesNotifier(),
);

// Provider for the selected line color.
final StateNotifierProvider<LineColorNotifier, Color> lineColorProvider =
   StateNotifierProvider<LineColorNotifier, Color>(
       (ref) => LineColorNotifier());

Step 3: Building the User Interface

1. Wrap the app with ProviderScope

To enable Riverpod’s state management, wrap the root widget with ProviderScope.

void main() {
 runApp(
   ProviderScope(
     child: MyApp(),
   ),
 );
} 

2. Implement the chart screen widget

The ChartScreen widget extends ConsumerWidget to utilize Riverpod’s WidgetRef for consuming providers.

reference.watch: Listens for state changes and rebuilds the widget whenever the provider’s state updates. It is used when the widget needs to react to changes dynamically.

reference.read: Accesses the provider’s state without rebuilding the widget. It is used when the state needs to be read once, such as inside event handlers or callbacks.

class ChartScreen extends ConsumerWidget {
 @override
 Widget build(BuildContext context, WidgetRef reference) {
   // ref.watch listens for state changes and rebuilds the widget when the state updates.
   final ChartSeriesType selectedSeries = reference.watch(chartSeriesProvider);
   final Color lineColor = reference.watch(lineColorProvider);

   return Scaffold(
     body: Column(
       children: [
         Padding(
           padding: const EdgeInsets.all(16.0),
           child: DropdownButton<ChartSeriesType>(
             value: selectedSeries,
             items: ChartSeriesType.values.map((ChartSeriesType series) {
               return DropdownMenuItem<ChartSeriesType>(
                 value: series,
                 child: Text(series.toString().split('.').last),
               );
             }).toList(),
             onChanged: (ChartSeriesType? newValue) {
               if (newValue != null) {
                  // ref.read accesses state without rebuilding the widget.
                 reference.read(chartSeriesProvider.notifier).updateSeries(newValue);
               }
             },
           ),
         ),
         Expanded(
           child: Padding(
             padding: const EdgeInsets.all(16.0),
             child: SfCartesianChart(
               primaryXAxis: CategoryAxis(),
               series: _buildChartSeries(selectedSeries, lineColor),
             ),
           ),
         ),

         // Display color buttons only for Line Series.
         if (selectedSeries == ChartSeriesType.line) _buildColorButtons(reference),
       ],
     ),
   );
 }
}


/// Buttons to change the color of the line series.
 Widget _buildColorButtons(WidgetRef reference) {
   return Padding(
     padding: const EdgeInsets.symmetric(vertical: 12.0),
     child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         _colorButton(reference, Colors.red, 'Red'),
         SizedBox(width: 10),
         _colorButton(reference, Colors.green, 'Green'),
         SizedBox(width: 10),
         _colorButton(reference, Colors.blue, 'Blue'),
       ],
     ),
   );
 }
 
 /// Helper method to create stylish buttons and update line color.
 Widget _colorButton(WidgetRef reference, Color color, String label) {
   return ElevatedButton(
     onPressed: () => reference.read(lineColorProvider.notifier).updateColor(color),
     style: ElevatedButton.styleFrom(
       backgroundColor: color,
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
       padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
     ),
     child: Text(label, style: TextStyle(color: Colors.white, fontSize: 16)),
   );
 }
 
 /// Returns different series based on selected type.
 List<CartesianSeries<dynamic, String>> _buildChartSeries(
     ChartSeriesType seriesType, Color lineColor) {
   final List<_ChartData> chartData = [
     _ChartData('Jan', 30),
     _ChartData('Feb', 40),
     _ChartData('Mar', 35),
     _ChartData('Apr', 50),
     _ChartData('May', 45),
   ];

   switch (seriesType) {
     case ChartSeriesType.line:
       return [
         LineSeries<_ChartData, String>(
           dataSource: chartData,
           xValueMapper: (_ChartData data, int index) => data.month,
           yValueMapper: (_ChartData data, int index) => data.value,
           color: lineColor,
           animationDuration: 0,
         ),
       ];
     case ChartSeriesType.column:
       return [
         ColumnSeries<_ChartData, String>(
           dataSource: chartData,
           xValueMapper: (_ChartData data, int index) => data.month,
           yValueMapper: (_ChartData data, int index) => data.value,
           animationDuration: 0,
         ),
       ];
   }
 }

By following the above steps, we can easily manage state in Syncfusion® Flutter Charts, using Riverpod . The chart dynamically updates based on user interactions while maintaining its state.

Demo:

View the sample in GitHub

Conclusion

I hope you enjoyed learning about how to manage Chart State with Riverpod in Flutter Chart.

You can refer to our Flutter CartesianChart feature tour page to know about its other groundbreaking feature representations. You can also explore our
Flutter CartesianChart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the
License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our
support forums, Direct-Trac, or feedback portal. We are always happy to assist you!