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. To build the app follow the below steps:
- Add the dependency to the pubspec.yaml file
- Import the dependency to the main.dart file.
- Use a StatelessWidget that extends to a StatefulWidget to structure the application
- Design function that controls the data in the chart
- Call the required type of built-in chart
Let’s discuss these steps in detail.
Adding the Dependency:
To add the dependency to the pubspec.yaml file, add syncfusion_flutter_charts in the dependencies section as shown below:
Importing the dependency:
To import the dependency to the main.dart file, use the following code:
Structuring the Application:
Create a class with a StateFulWidget that further extends to a StatelessWidget to give the app a basic structure with appbar and a body that can hold content as shown below:
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: