Flutter - Working with Charts

The syncfusion_flutter_charts library in Flutter is used to handle charts. Charts can be very useful while depicting data in visual form. These packages come with a wide range of beautiful and high-performance charts. It comes with various Cartesian or circular charts with smooth interaction and beautiful animations which are completely customizable and extendable.

In this article, we will look into the same, and with the help of a simple application.

Steps to implement charts in flutter application

Step 1 : Adding the Dependency:

To add the dependency to the pubspec.yaml file, add syncfusion_flutter_charts in the dependencies section as shown below:

syncfusion_flutter_charts: ^28.2.7

Now, click on pub get button in android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : Importing the dependency:

To import the dependency to the main.dart file, use the following code:

import 'package:syncfusion_flutter_charts/charts.dart';

Step 3 : Structuring the Application:

Create a class with a Statefulwidget that further extends to a Statelesswidget to give a basic structure with appbar and a body that can hold content as shown below:

Step 4 : Designing the Function:

Here we will construct a function that  _Infections(), that takes in the COVID-19 data from a fixed set of data points and implement them on the chart based on the month and no. of infections that month. This can be done as follows:

This function can be directly used in the body of the application as shown below:

Complete Source Code(main.dart):

Output: