Displaying a list of charts in Flutter

A simple 6 step tutorial to develop a list of charts in Flutter.

Recently while developing an application, I came across a use case to display a list of charts in ListView of Flutter framework. I could not find a single article to implement the same so I thought of sharing my own solution to it.

(I assume that you guys have a basic knowledge about flutter dev, lists view, widgets stateless and stateful widgets. If not, there are a lot of good options to start with flutter. I would suggest you read them and revisit the tutorial once you have built your foundation .👍)

Here is what the final product will look like:

So let’s get started! 💪

Step 1: Create the flutter app

Let the name of the app to be created be charts_list_app.

flutter create charts_list_app

Step 2: Add dependency for charts flutter library

(charts flutter library link)

Add this line in pubspec.yaml in the main directory.

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2 # this is already present
#line to be added 
charts_flutter: ^0.9.0

Step 3: Create a model class to store our chart values

For populating values into our charts, we are going to prepare a model class depicting each index and populate marks scored by students in different assessments.

So the model class will be:

Step 4: Create a custom list type with a chart as the child element

Flutter has provided functionality to develop custom list views with different types of items.

According to flutter docs:

Here’s how you can create such a structure with Flutter:

1. Create a data source with different types of items.

2. Convert the data source into a list of widgets.

Step 4.1: Create a data source

For creating a separate data source, firstly we need to create an abstract class that displays our chart and the chart title.

Now we have to develop a class that implements the ListItem methods. This is the class the logic for the implementation goes.

Step 4.2: Create a class to implement ListItem abstract class

class ChildItem implements ListItem{
final String heading; //1
List<charts.Series<Assessment, String >> _seriesList; //2
ChildItem(this.heading); //3
@override
  Widget buildTitle(BuildContext context) {
    // TODO: implement buildTitle
   }
@override
  Widget buildChartTitle(BuildContext context) {
   // TODO: implement buildTitle
  }
}

1. String heading: The title we wish to give our cell.
2. _seriesList: Data required by the chart to populate is provided via this declaration. For a more in-depth explanation to charts, you can go through the official docs here.
3. Constructor: We are making the constructor with a compulsory heading name for the ChildItem class.

The functions of buildTitle & buildChartTitle are inherited from the abstract class ListItem.

Step 4.3: Finishing buildItem and buildChartItem functions

BuildTitle: In the above code we set the heading to be displayed for each chart.

buildChartTitle: This function populates the chart on each cell of our list.

Step 4.4: The _displayChart function

Concentrate on the _displayChart() function that we are going to implement next. This function generates random values and populates the chart.

charts.BarChart _displayChart(List<charts.Series> seriesList, bool animate){
...
}

When you look closely, the return type of the function is a bar chart i.e. charts.BarChart. You can have other return types as well according to your need (depending upon your graph type) i.e. spiral, radial, pie, vertical bar chart, etc. You can find different chart types supported by flutter here.

The required parameters here are

(i) List of type: charts.Series. Data required by the series chart (in our case bar chart)
(ii) boolean animate (to enable chart animation).

Above is the pretty standard implementation of the bar chart. We set the labels of x-axis and y-axis according to our data.

Step 4.5: Generate data for the charts to be displayed

Till now we have implemented the functions required to build a chart and its title. Now we generate sample data that can be populated.

Some important points to focus on:

1. _next() function: This function generates a random integer between 1 to 100. Below is the complete function definition and implementation for the same.

import 'dart:math';
static int _next(int min, int max) => min + _random.nextInt(max - min);

2. domainFn: Responsible for populating the x-axis.

3. measureFn: Responsible for populating the y-axis.

Step 5: Create the view to display chart list

Now that we are done with all functionalities to generate data and widgets for our list item, let us create a class to generate and display the required list.

Create a stateful widget that comprises of list view (keyword stfu in Android Studio and VS Code).

If you look closely, we have _buildList(context) function that creates our list. I like to keep my functions precise and extract widgets wherever possible. This increases the modularity and readability of the code. The complete implementation of _buildList is shown below.

At line 10 and 11 we define title => buildTitle (i.e the title of the list cell) and subtitle => buildChartTitle (i.e. the chart of the list cell).

Step 6: Setup the main class to display the chart list

We set the home parameter of the MyApp class (main class) to ChartListView class (list building class).

home: ChartListView(
   items: List<ListItem>.generate(5,
       (i) => HeadingItem("Assignment $i"),
      ),
);

Here, we generate 5 list items and give heading to each as ‘Assignment Number’ according to the child number of the list.

Voila! We are done. Run the app to see the charts. 📊

list of charts in flutter

You can find the complete project on Github below.

arora-72/ChartsList-flutter

I hope you liked the tutorial 🙌.

Feel free to ask questions and improve upon my solution. Always open to constructive criticism.

If you liked the tutorial, don’t forget to give claps👏 .

Until next time! Till then enjoy app development😁.

Indresh Arora — Summer Intern — BlackRock | LinkedIn

Flutter Community