Tutorial
Flutter: Creating Bar Charts with charts_flutter
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Bar charts are useful ways to display data to a user, and with the use of the charts_flutter
charting library, it’s easier than ever!
This article will see us mapping World of Warcraft subscriber numbers between the years of 2008-2015.
Creating a New Flutter Project
As always, we’ll start off by setting up a new project and adding the charts_flutter
plugin:
# New Flutter project
$ flutter create bar_wow
# Open this up inside of VS Code
$ cd bar_wow && code .
Adding the charts_flutter plugin
Next up, we’ll need to add the charts_flutter
plugin within our pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
charts_flutter: ^0.8.1
We can now go ahead and run this on the iOS or Android simulator/device of your choice.
Scaffolding Our Application
Let’s replace everything inside of main.dart
with a MaterialApp
that points at a HomePage
which can be found at home.dart
:
import 'package:bar_wow/home.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
Next up, we’ll need to create the HomePage
:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("World of Warcraft Subscribers"),
),
body: Center(
child: Text("Hello, Charts!"),
),
);
}
}
Now that we’ve established a base application, we can go ahead and create the model for our bar chart data.
Subscriber Model
Our bar chart will be focused on showing the amount of World of Warcraft subscribers for a particular year, therefore, our model would look something like this:
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/foundation.dart';
class SubscriberSeries {
final String year;
final int subscribers;
final charts.Color barColor;
SubscriberSeries(
{@required this.year,
@required this.subscribers,
@required this.barColor});
}
This allows us to represent our data in the most simplistic form.
Creating the Data
For example’s sake, we’re going to be creating the data inside of the HomePage
as a List<SubscriberSeries>
:
import 'package:bar_wow/subscriber_chart.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
final List<SubscriberSeries> data = [
SubscriberSeries(
year: "2008",
subscribers: 10000000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2009",
subscribers: 11000000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2010",
subscribers: 12000000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2011",
subscribers: 10000000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2012",
subscribers: 8500000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2013",
subscribers: 7700000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2014",
subscribers: 7600000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
SubscriberSeries(
year: "2015",
subscribers: 5500000,
barColor: charts.ColorUtil.fromDartColor(Colors.red),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("World of Warcraft Subscribers"),
),
body: Center(
child: Text("Hello, Charts!"),
),
);
}
}
Now that we’ve got our data, all we need to is create the bar chart!
Creating the Bar Chart
Inside of subscriber_chart.dart
, create a new StatelessWidget
named SubscriberChart
that takes in the SubscriberSeries
as a prop
:
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';
class SubscriberChart extends StatelessWidget {
final List<SubscriberSeries> data;
SubscriberChart({@required this.data});
}
We can then use this data
to build our charts.Series
like so:
@override
Widget build(BuildContext context) {
List<charts.Series<SubscriberSeries, String>> series = [
charts.Series(
id: "Subscribers",
data: data,
domainFn: (SubscriberSeries series, _) => series.year,
measureFn: (SubscriberSeries series, _) => series.subscribers,
colorFn: (SubscriberSeries series, _) => series.barColor)
];
}
The domainFn
and measureFn
is used to compare the subscribers
data for that year
. We’re also using the colorFn
to potentially pass a barColor
which we did like so:
SubscriberSeries(
year: "2008",
subscribers: 10000000,
barColor: charts.ColorUtil.fromDartColor(Colors.blue),
),
We may want to make the barColor
optional with a default of Colors.blue
(or a color of your choice) in a production application, I’ve opted to make one bar red and the rest blue in this instance.
Let’s update the build
function to return our chart:
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:bar_wow/subscriber_series.dart';
import 'package:flutter/material.dart';
class SubscriberChart extends StatelessWidget {
final List<SubscriberSeries> data;
SubscriberChart({@required this.data});
@override
Widget build(BuildContext context) {
List<charts.Series<SubscriberSeries, String>> series = [
charts.Series(
id: "Subscribers",
data: data,
domainFn: (SubscriberSeries series, _) => series.year,
measureFn: (SubscriberSeries series, _) => series.subscribers,
colorFn: (SubscriberSeries series, _) => series.barColor)
];
return Container(
height: 400,
padding: EdgeInsets.all(20),
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text(
"World of Warcraft Subscribers by Year",
style: Theme.of(context).textTheme.body2,
),
Expanded(
child: charts.BarChart(series, animate: true),
)
],
),
),
),
);
}
}
What did we do here? We added some markup to our charts.BarChart
by surrounding it with a Card
. The key thing to note is that we’re passing the series
as a required
parameter to charts.BarChart
:
charts.BarChart(
series,
animate: true
)
Wiring it All Up!
Finally, head over to home.dart
and change the build
to use the SubscriberChart
like so:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text("World of Warcraft Subscribers"),
),
body: Center(
child: SubscriberChart(
data: data,
)),
);
}
This gives us the following chart: