Beautiful, animated charts for Flutter
We are super excited to announce a fully-featured, animated charting library for Flutter!
Flutter enables developers to craft high-quality mobile app user interfaces for iOS and Android. Many of the Flutter apps being created internally at Google present large amounts of data. Doing that efficiently requires not just regular UI widgets, but lots of elegant charts. Back when we set out to create a Flutter charting library we quickly discovered that it was no easy feat. So it is with much joy that we are now able to announce the ‘Charts for Flutter’-library as open source, available for all Flutter apps. Checkout charts_flutter
!
The need for animation
One of the core complexities we discovered early was that great charts don’t just display data statically. For them to be engaging they need to be “alive”. For example, to establish page transitions they need to animate in, and when new data is loaded they need to gradually animate to the new state so it’s clear to the user what the changes are:
Building animated charts is not as simple as it may seem. For a “behind the curtain” tale, check out Mikkel’s great post on the engineering challenge our team tackled when we built the initial library.
Supported chart types
Charts for Flutter supports three chart types, each with several configuration options:
- Bar charts, incl. support for stacking several data series, showing target lines, and rendering the bars horizontally
- Line charts, including support for time series
- Pie and ‘donut’ charts
Here are a few sample charts created with Charts for Flutter:
For more details, see the Charts Gallery app located inside the /example/
folder of the repo, and in the online gallery.
Getting started with Charts for Flutter
It’s pretty easy to use Charts for Flutter! We’ll start by creating a new Flutter app, and then add a bar chart to that to visualize the number of clicks: two bars visualizing the past number of clicks (fixed values), and one bar for the current year (tied to the current state of the _counter
variable):
Start by declaring a dependency on the package: Open the pubspec.yaml
file, and add an entry for charts_flutter
in the dependencies section.
dependencies:
flutter:
sdk: flutter
charts_flutter: ^0.2.0
Now run your IDE’s function to get packages, or run flutter packages get
from the terminal.
Next, define a data type to hold the data for each bar column. Since we want years on the x-axis and counts on the y-axis, we create a class with a String
and an int
field:
Then, to support specifying a color for each year, we add a charts color
field, which we convert from Flutter’s corresponding Color
type:
Next, we will update the build()
method of _MyHomePageState
to create the chart data set, using the _counter
variable:
Next, we need to wrap data in a Series. Let’s review a few core charting concepts first:
- Domain: The thing being measured; for example, ‘type of vehicle’
- Measure: The numerical value observed; for example, ‘number of wheels’
- Data point: A measure for a domain; for example, (‘car’, 4). Sometimes referred to as a datum.
- Series: A sequenced collection of individual data points; for example [(‘car’, 4), (‘bicycle’, 2)]
- Id: A unique identifier for a single series; used for charts that render several series; for example ‘Typical number of wheels’, and ‘Maximum number of wheels’
With that we can create our data series, setting the year
component of our data class to the domain, the clicks
component to the measure:
And then we are ready to create the chart; to control its padding and size we wrap it in Padding
and SizedBox
:
And then finally we can add the chart below the two text labels:
Presto, a nice bar chart!
The complete code is also available for review.
We look forward to seeing what you might build with Charts for Flutter. Should you have any suggestions, or find any bugs, please file an issue in our tracker! Should Charts for Flutter not match your requirements, you may also want to take a look at some of the other charting packages in Pub, such as flutter_circular_chart, flutter_charts, and flutter_sparkline.