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

 

 

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. 

dependencies:
 flutter:
   sdk: flutter
 cupertino_icons: ^0.1.2
 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.

class OrdinalSales {
 final String year;
 final int sales;

 OrdinalSales(this.year, this.sales);
}

Step 4

 

Now, go to main.dart and import the chart plugin.

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.

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:charts_in_flutter/sales_data.dart';

void main() => runApp(HomePage());

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 Widget chartContainer = Column(
   mainAxisAlignment: MainAxisAlignment.center,
   children: [Text('Chart Viewer')],
 );

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text('Charts in Flutter'),
       ),
       body: SingleChildScrollView(
         child: Column(
           children: <Widget>[
             Container(
               height: 250,
               child: chartContainer,
             ),
             Padding(
               padding: EdgeInsets.only(top: 10),
               child: Text('Bar Charts'),
             ),
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: <Widget>[
                 RaisedButton(
                   child: Text('Simple'),
                   onPressed: () {
                     setState(() {
                       chartContainer = SimpleBarChart.withSampleData();
                     });
                   },
                 ),
               ],
             ),
           ],
         ),
       ),
     ),
   );
 }
}

Step 6

 

Following is the implementation of a simple bar chart. Put the below code in the main.dart file.

class SimpleBarChart extends StatelessWidget {
 final List<charts.Series> seriesList;
 final bool animate;

 SimpleBarChart(this.seriesList, {this.animate});

 /// Creates a [BarChart] with sample data and no transition.
 factory SimpleBarChart.withSampleData() {
   return new SimpleBarChart(
     _createSampleData(),
     // Disable animations for image tests.
     animate: false,
   );
 }

 @override
 Widget build(BuildContext context) {
   return new charts.BarChart(
     seriesList,
     animate: animate,
   );
 }

 /// Create one series with sample hard coded data.
 static List<charts.Series<OrdinalSales, String>> _createSampleData() {
   final data = [
     new OrdinalSales('2014', 5),
     new OrdinalSales('2015', 25),
     new OrdinalSales('2016', 100),
     new OrdinalSales('2017', 75),
   ];

   return [
     new charts.Series<OrdinalSales, String>(
       id: 'Sales',
       colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
       domainFn: (OrdinalSales sales, _) => sales.year,
       measureFn: (OrdinalSales sales, _) => sales.sales,
       data: data,
     )
   ];
 }
}

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

• Flutter Chart Plugin
• Git Repo