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:
import 'package:syncfusion_flutter_charts/charts.dart';
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:
class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Charts in Flutter' ,
theme: ThemeData(primarySwatch: Colors.blue),
home: _MyHomePage(),
);
}
} class _MyHomePage extends StatefulWidget {
_MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<_MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text( 'GeeksForGeeks' ),
backgroundColor: Colors.green,
),
body:
}
} |
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:
class _Infections {
_Infections( this .year, this .victims);
final String year;
final double victims;
} |
This function can be directly used in the body of the application as shown below:
body: SfCartesianChart( primaryXAxis: CategoryAxis(),
// Chart title
title: ChartTitle(text: 'Monthly Covid-19 Infections' ),
// Enable legend
legend: Legend(isVisible: true ),
// Enable tooltip
tooltipBehavior: TooltipBehavior(enable: true ),
series: <ChartSeries<_Infections, String>>[
LineSeries<_Infections, String>(
dataSource: <_Infections>[
_Infections( 'Jan' , 35000),
_Infections( 'Feb' , 28000),
_Infections( 'Mar' , 34000),
_Infections( 'Apr' , 32000),
_Infections( 'May' , 40000),
_Infections( 'Jun' , 60000)
],
xValueMapper: (_Infections victims, _) => victims.year,
yValueMapper: (_Infections victims, _) => victims.victims,
// Enable data label
dataLabelSettings: DataLabelSettings(isVisible: true ))
]));
}
} |
Complete Source Code:
import 'package:flutter/material.dart' ;
import 'package:syncfusion_flutter_charts/charts.dart' ;
void main() {
return runApp(_ChartApp());
} class _ChartApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Charts in Flutter' ,
theme: ThemeData(primarySwatch: Colors.blue),
home: _MyHomePage(),
);
}
} class _MyHomePage extends StatefulWidget {
// ignore: prefer_const_constructors_in_immutables
_MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<_MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text( 'GeeksForGeeks' ),
backgroundColor: Colors.green,
),
body: SfCartesianChart(
primaryXAxis: CategoryAxis(),
// Chart title
title: ChartTitle(text: 'Monthly Covid-19 Infections' ),
// Enable legend
legend: Legend(isVisible: true ),
// Enable tooltip
tooltipBehavior: TooltipBehavior(enable: true ),
series: <ChartSeries<_Infections, String>>[
LineSeries<_Infections, String>(
dataSource: <_Infections>[
_Infections( 'Jan' , 35000),
_Infections( 'Feb' , 28000),
_Infections( 'Mar' , 34000),
_Infections( 'Apr' , 32000),
_Infections( 'May' , 40000),
_Infections( 'Jun' , 60000)
],
xValueMapper: (_Infections victims, _) => victims.year,
yValueMapper: (_Infections victims, _) => victims.victims,
// Enable data label
dataLabelSettings: DataLabelSettings(isVisible: true ))
]));
}
} class _Infections {
_Infections( this .year, this .victims);
final String year;
final double victims;
} |
Output: