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,

Simple Bar Chart
Stacked Bar Chart
Grouped Bar Chart
Grouped Stacked Bar Chart
Grouped Target Line Bar Chart
Stacked Horizontal Bar Chart
Stacked Target Line Bar Chart
Horizontal Bar Chart
Horizontal Bar Label Bar Chart
Vertical Bar Label Bar Chart
Spark Bar Bar Chart
Grouped Fill Color Bar Chart
Stacked Fill Color Bar Chart
Pattern Forward Hatch Bar Chart
Horizontal Pattern Forward Hatch Bar Chart
Grouped Stacked Weight Pattern Bar Chart
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