Implement Charts In Flutter

In this article, you will learn how to Implement Charts in Flutter.

Introduction

 
In this article, we will learn how to implement charts in Flutter. Charts are very useful in statistical representation. Flutter provides a rich chart plugin named charts_flutter. We will implement charts_flutter plugin in this article. We will only cover bar charts in this article. 
 
Output
 
Charts In Flutter
 
Types of Charts implemented in this article,
  1. Simple Bar Chart
  2. Stacked Bar Chart
  3. Grouped Bar Chart
  4. Grouped Stacked Bar Chart
  5. Grouped Target Line Bar Chart
  6. Stacked Horizontal Bar Chart
  7. Stacked Target Line Bar Chart
  8. Horizontal Bar Chart
  9. Horizontal Bar Label Bar Chart
  10. Vertical Bar Label Bar Chart
  11. Spark Bar Bar Chart
  12. Grouped Fill Color Bar Chart
  13. Stacked Fill Color Bar Chart
  14. Pattern Forward Hatch Bar Chart
  15. Horizontal Pattern Forward Hatch Bar Chart
  16. Grouped Stacked Weight Pattern Bar Chart
  17. Custom Rounded Bars Bar Chart
Plugin Required
 
charts_flutter: ^0.7.0
 

Programming Steps

 
Step 1
 
The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, then you can check my blog Create a first app in Flutter. I have created an app named “charts_in_flutter”
 
Step 2
 
Open the pubspec.yaml file in your project and add the following dependencies into it. 
  1. dependencies:  
  2.  flutter:  
  3.    sdk: flutter  
  4.  cupertino_icons: ^0.1.2  
  5.  charts_flutter: ^0.7.0  
Step 3
 
Create a new file named as “sales_data.dart”. This file contains a basic data structure for charts. Insert the following code for the data structure.
  1. class OrdinalSales {  
  2.  final String year;  
  3.  final int sales;  
  4.    
  5.  OrdinalSales(this.year, this.sales);  
  6. }  
Step 4
 
Now, go to main.dart and import the chart plugin.
  1. import 'package:charts_flutter/flutter.dart' as charts;  
Step 5
 
Then, create a basic structure for the app in main.dart file to implement the chart container. Create a structure like the output screenshot as above. Following is the code for only a simple chart. You can download the full source code and check out all the charts.
  1. import 'package:flutter/material.dart';  
  2. import 'package:charts_flutter/flutter.dart' as charts;  
  3. import 'package:charts_in_flutter/sales_data.dart';  
  4.    
  5. void main() => runApp(HomePage());  
  6.    
  7. class HomePage extends StatefulWidget {  
  8.  @override  
  9.  _HomePageState createState() => _HomePageState();  
  10. }  
  11.    
  12. class _HomePageState extends State<HomePage> {  
  13.  Widget chartContainer = Column(  
  14.    mainAxisAlignment: MainAxisAlignment.center,  
  15.    children: [Text('Chart Viewer')],  
  16.  );  
  17.    
  18.  @override  
  19.  Widget build(BuildContext context) {  
  20.    return MaterialApp(  
  21.      home: Scaffold(  
  22.        appBar: AppBar(  
  23.          title: Text('Charts in Flutter'),  
  24.        ),  
  25.        body: SingleChildScrollView(  
  26.          child: Column(  
  27.            children: <Widget>[  
  28.              Container(  
  29.                height: 250,  
  30.                child: chartContainer,  
  31.              ),  
  32.              Padding(  
  33.                padding: EdgeInsets.only(top: 10),  
  34.                child: Text('Bar Charts'),  
  35.              ),  
  36.              Row(  
  37.                mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
  38.                children: <Widget>[  
  39.                  RaisedButton(  
  40.                    child: Text('Simple'),  
  41.                    onPressed: () {  
  42.                      setState(() {  
  43.                        chartContainer = SimpleBarChart.withSampleData();  
  44.                      });  
  45.                    },  
  46.                  ),  
  47.                ],  
  48.              ),  
  49.            ],  
  50.          ),  
  51.        ),  
  52.      ),  
  53.    );  
  54.  }  
  55. }  
Step 6
 
Following is the implementation of a simple bar chart. Put the below code in the main.dart file.
  1. class SimpleBarChart extends StatelessWidget {  
  2.  final List<charts.Series> seriesList;  
  3.  final bool animate;  
  4.    
  5.  SimpleBarChart(this.seriesList, {this.animate});  
  6.    
  7.  /// Creates a [BarChart] with sample data and no transition.  
  8.  factory SimpleBarChart.withSampleData() {  
  9.    return new SimpleBarChart(  
  10.      _createSampleData(),  
  11.      // Disable animations for image tests.  
  12.      animate: false,  
  13.    );  
  14.  }  
  15.    
  16.  @override  
  17.  Widget build(BuildContext context) {  
  18.    return new charts.BarChart(  
  19.      seriesList,  
  20.      animate: animate,  
  21.    );  
  22.  }  
  23.    
  24.  /// Create one series with sample hard coded data.  
  25.  static List<charts.Series<OrdinalSales, String>> _createSampleData() {  
  26.    final data = [  
  27.      new OrdinalSales('2014', 5),  
  28.      new OrdinalSales('2015', 25),  
  29.      new OrdinalSales('2016', 100),  
  30.      new OrdinalSales('2017', 75),  
  31.    ];  
  32.    
  33.    return [  
  34.      new charts.Series<OrdinalSales, String>(  
  35.        id: 'Sales',  
  36.        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,  
  37.        domainFn: (OrdinalSales sales, _) => sales.year,  
  38.        measureFn: (OrdinalSales sales, _) => sales.sales,  
  39.        data: data,  
  40.      )  
  41.    ];  
  42.  }  
  43. }  
Step 7
 
Great, you are done with chart implementation in Flutter. Run this project in device or emulator and check the output.
 

Conclusion

 
In this article, we have learned how to implement charts in Flutter. I have implemented bar charts only but you can implement other types of charts by taking a reference of the main plugin site.
 
Reference