Flutter Chart Example Tutorial

In this article, we are going to integrate charts in flutter applications with flutter chart example. We are using charts_flutter package to add charts in flutter applications.

We can display data in different types of charts such as bar charts, line charts, pie charts etc. using this charts_flutter package. We are creating bar charts to compare data in this article.

We are displaying cristiano ronaldo’s earnings year by year according to forbes magazine in this example. So first we need to add charts_flutter package in our project to use bar charts in flutter applications.

 

Add below package in your pubspec.yaml file

charts_flutter: ^0.10.0
 
 

Create Data Model for Flutter Chart Example

import ‘package:flutter/material.dart’;

class EarningsTimeline {
final String year;
final double earning;

EarningsTimeline({
    @required this.year,
    @required this.earning,
});
}

 
 

Create Data to display in Flutter Chart Example

final List<EarningsTimeline> listEarnings = [
EarningsTimeline(year: “08”, earning: 18.5),
EarningsTimeline(year: “09”, earning: 21),
EarningsTimeline(year: “10”, earning: 30),
EarningsTimeline(year: “11”, earning: 38),
EarningsTimeline(year: “12”, earning: 42),
EarningsTimeline(year: “13”, earning: 43.5),
EarningsTimeline(year: “14”, earning: 73),
EarningsTimeline(year: “15”, earning: 79.6),
EarningsTimeline(year: “16”, earning: 82),
EarningsTimeline(year: “17”, earning: 93),
EarningsTimeline(year: “18”, earning: 108),
EarningsTimeline(year: “19”, earning: 109),
EarningsTimeline(year: “20”, earning: 117),
];
 
 

Create Bar Chart

List<charts.Series<EarningsTimeline, String>> timeline = [
charts.Series(
    id: “Subscribers”,
    data: listEarnings,
    domainFn: (EarningsTimeline timeline, _) => timeline.year,
    measureFn: (EarningsTimeline timeline, _) => timeline.earning,
)
];
 
 

Display Bar Chart

Scaffold(
appBar: AppBar(title: Text(“Flutter Charts Sample”)),
body: Center(
child: Container(
    height: 400,
    padding: EdgeInsets.all(20),
    child: Card(
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
                children: <Widget>[
                    Text(
                        “Cristiano Ronaldo Earnings (\$M)”,
                    ),
                    Expanded(
                        child: charts.BarChart(timeline, animate: true),
                    ),
                    Text(
                        “Source: Forbes”,
                    ),
                ],
            ),
        ),
    ),
)
),
);
 
 

Final Code

import ‘package:flutter/material.dart’;
import ‘package:charts_flutter/flutter.dart’ as charts;
import ‘Earnings.dart’;

class ChartsScreen extends StatefulWidget {

@override
_ChartsScreenState createState() => _ChartsScreenState();
}

class _ChartsScreenState extends State<ChartsScreen> {
@override
Widget build(BuildContext context) {

final List<EarningsTimeline> listEarnings = [
EarningsTimeline(year: “08”, earning: 18.5),
EarningsTimeline(year: “09”, earning: 21),
EarningsTimeline(year: “10”, earning: 30),
EarningsTimeline(year: “11”, earning: 38),
EarningsTimeline(year: “12”, earning: 42),
EarningsTimeline(year: “13”, earning: 43.5),
EarningsTimeline(year: “14”, earning: 73),
EarningsTimeline(year: “15”, earning: 79.6),
EarningsTimeline(year: “16”, earning: 82),
EarningsTimeline(year: “17”, earning: 93),
EarningsTimeline(year: “18”, earning: 108),
EarningsTimeline(year: “19”, earning: 109),
EarningsTimeline(year: “20”, earning: 117),
];

List<charts.Series<EarningsTimeline, String>> timeline = [
charts.Series(
id: “Subscribers”,
data: listEarnings,
domainFn: (EarningsTimeline timeline, _) => timeline.year,
measureFn: (EarningsTimeline timeline, _) => timeline.earning,
)
];

return Scaffold(
appBar: AppBar(title: Text(“Flutter Charts Sample”)),
body: Center(
child: Container(
height: 400,
padding: EdgeInsets.all(20),
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text(
“Cristiano Ronaldo Earnings (\$M)”,
),
Expanded(
child: charts.BarChart(timeline, animate: true),
),
Text(
“Source: Forbes”,
),
],
),
),
),
)
),
);
}
}

 
 
flutter chart example
 

Leave a Reply