Flutter Charts :
Flutter charts is used to represent the data in graphical way so that user can easily understand it.We can plot a graph with the data to show the raise and fall of the values representing the data.
Charts are provided to make data easily understand as they are easy to read the data and know the performance on yearly bases based on year.
The main advantage of flutter charts is used to make you understand the large amount’s of data easily through graphical representation.
There are different types of charts we will see in this tutorial we will deal with the linear charts.
Apps like google analytics, youtube console depicts these charts to show the visitors count and so on other services through these graphs.
Flutter Charts Video Tutorial :
Go through the below tutorial for more detailed information.
Project Structure :
This image below depicts the project structure of flutter charts.
pubspec.yaml :
Add the dependency fl_chart and specify the version according to the latest available to avoid code level issues.
dependencies: flutter: sdk: flutter fl_chart: ^0.10.1
main.dart :
Initialize with void main() and consider a default class MyApp()
void main() { runApp(MyApp()); }
Return material app and consider home
MaterialApp( home: Home(), );
Declare a app bar and provide the title.
AppBar( title: Text("Line Charts"), ),
Declare the charts here we are considering LineCharts() for now.
LineCharts(),
LineCharts.dart :
In this file we will declare our flutter charts so that we can use it through the project just by passing values to it.
Define the spots to be plotted on the chart
spots: [ FlSpot(0, 0), FlSpot(1, 1), FlSpot(2, 3), FlSpot(3, 3), FlSpot(4, 5), FlSpot(4, 4) ],
If curve required then provide it through boolean variables
isCurved: false,
provide the bar width
barWidth: 1,
color is specified for the curve
colors: [ Colors.black, ],
below bar data
belowBarData: BarAreaData( show: true, colors: [Colors.lightGreen.withOpacity(0.4)], cutOffY: cutOffYValue, applyCutOffY: true, ),
above bar data
aboveBarData: BarAreaData( show: true, colors: [Colors.red.withOpacity(0.6)], cutOffY: cutOffYValue, applyCutOffY: true, ),
Declare the years i.e., cases to be plotted on the chart based on switch condition.
switch (value.toInt()) { case 0: return '2015'; case 1: return '2016'; case 2: return '2017'; case 3: return '2018'; case 4: return '2019'; default: return ''; }
provide the left titles here we are providing numbers starting from 20
leftTitles: SideTitles( showTitles: true, getTitles: (value) { return '\$ ${value + 20}'; }, ),
FullCode :
Providing the full code for flutter charts integration in your app.
import 'package:fl_chart/fl_chart.dart'; import 'package:flutter/material.dart'; class LineCharts extends StatelessWidget { @override Widget build(BuildContext context) { const cutOffYValue = 0.0; const yearTextStyle = TextStyle(fontSize: 10, color: Colors.black, fontWeight: FontWeight.bold); return SizedBox( width: 330, height: 180, child: LineChart( LineChartData( lineTouchData: LineTouchData(enabled: false), lineBarsData: [ LineChartBarData( spots: [ FlSpot(0, 0), FlSpot(1, 1), FlSpot(2, 3), FlSpot(3, 3), FlSpot(4, 5), FlSpot(4, 4) ], isCurved: false, barWidth: 1, colors: [ Colors.black, ], belowBarData: BarAreaData( show: true, colors: [Colors.lightGreen.withOpacity(0.4)], cutOffY: cutOffYValue, applyCutOffY: true, ), aboveBarData: BarAreaData( show: true, colors: [Colors.red.withOpacity(0.6)], cutOffY: cutOffYValue, applyCutOffY: true, ), dotData: FlDotData( show: false, ), ), ], minY: 0, titlesData: FlTitlesData( bottomTitles: SideTitles( showTitles: true, reservedSize: 6, textStyle: yearTextStyle, getTitles: (value) { switch (value.toInt()) { case 0: return '2015'; case 1: return '2016'; case 2: return '2017'; case 3: return '2018'; case 4: return '2019'; default: return ''; } }), leftTitles: SideTitles( showTitles: true, getTitles: (value) { return '\$ ${value + 20}'; }, ), ), axisTitleData: FlAxisTitleData( leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10), bottomTitle: AxisTitle( showTitle: true, margin: 10, titleText: 'Year', textStyle: yearTextStyle, textAlign: TextAlign.right)), gridData: FlGridData( show: true, checkToShowHorizontalLine: (double value) { return value == 1 || value == 2 || value == 3 || value == 4; }, ), ), ), ); } }
Flutter charts output :
This screen below depicts the usage of flutter charts