Draw Graph in Flutter with Example

In this article, we are going to draw line graph with multiple axes in flutter application using draw_graph flutter package. You can also check out flutter chart example.

Using this draw_graph flutter package, we can display multiple axes to set different datasets in single line graph. Line Graph is used to display data which are changed over long period. In this flutter example, we are comparing top six premier league football clubs points in premier league table in last five years using this line graph.

LineGraph widget has many properties to customize graph in flutter. features property is used to add different data in list. Feature widget has properties like title, color, data. title is used to display label in flutter graph. In this property, we will add football club names. color property is used to display individual color for items. data attribute is used to add dataset in flutter graph.

size property is used to set width and height of graph widget in flutter. showDescription property is used to hide or show description at end of graph. graph color is used to set color for axis and labels in flutter graph. labelX property is used to display labels for X-axis. labelY property is used to display labels for Y-axis.

 

Add required package in pubspec.yaml file

draw_graph: ^1.0.0
 
 

Add labels and data in array

final List<Feature> listFeatures = [
Feature(
title: “Man United”,
color: Colors.red,
data: [0.66, 0.69, 0.81, 0.66, 0.66],
),
Feature(
title: “Liverpool”,
color: Colors.black,
data: [0.60, 0.76, 0.75, 0.97, 0.99],
),
Feature(
title: “Chelsea”,
color: Colors.blueAccent,
data: [0.50, 0.93, 0.70, 0.72, 0.66],
),
Feature(
title: “Man City”,
color: Colors.cyanAccent,
data: [0.66, 0.78, 0.10, 0.98, 0.81],
),
Feature(
title: “Tottenham”,
color: Colors.indigo,
data: [0.70, 0.86, 0.77, 0.71, 0.59],
),
Feature(
title: “Arsenal”,
color: Colors.deepOrangeAccent,
data: [0.71, 0.75, 0.63, 0.70, 0.56],
),
];
 
 

Draw Graph in Flutter

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Graph Sample’)),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 30),
child: Text(
“Premier League Points”,
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
letterSpacing: 2,
),
),
),
LineGraph(
size: Size(400, 400),
features: listFeatures,
showDescription: true,
labelX: [‘2015-16’, ‘2016-17’, ‘2017-18’, ‘2018-19’, ‘2019-20’],
labelY: [‘50%’, ‘60%’, ‘70%’, ‘80%’, ‘90%’, ‘100%’],
graphColor: Colors.black87,
),
SizedBox(
height: 50,
)
],
),
);
}
 
 
draw graph
 

Leave a Reply