How to Implement Beautiful Charts in Flutter
In this article, we are going to learn how to implement beautiful charts in Flutter. Charts are a great visual way to represent any type of data, be it statistical data, financial data or stats. We are using charts in a lot of our Flutter app templates, and we are going to describe how we implemented them.
When it comes to data visualization or representation in any field, the first thing that comes to our mind is charts. Charts are an effective and efficient mechanism to display statistical data that will not only make it easier to read the data but also compare and contrast. It helps display data in an informative way that makes it easy for readers to comprehend the overall data. Now that we know the importance of charts in the statistical world, we should also know that charts are very useful to display complex data in mobile applications as well.
Here, we are going to learn how to add charts to a Flutter mobile app. The Flutter mobile application development framework is booming in the current context and it will surely take the center stage as a state-of-the-art mobile app development tech in the near future. In this tutorial, we are going to make use of a fl_chart package to add different charts to our Flutter app UI. The idea is to install the library and use the different chart widgets offered by it. We will also learn how to define the series list value that is to be used by chart widgets to visually represent the data. So, let’s get started!
Setting Up the Flutter Charts Project
First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other flutter app development-related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:
flutter create chartpost
After the project has been set up, we can navigate inside the project directory and execute the run command to start the project.
Creating a Home Page UI
Now, we are going to create a home page Scaffold. For that, we need to create a file called home_page.dart. Inside the file, we can use the code from the following code snippet:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Bitcoin price from Jan to March (2024)"),
),
body: const Center(
child: Text("Hello, Charts!"),
),
);
}
}
Here, we have returned a simple Scaffold widget with an App Bar and a body from the stateless widget class called HomePage. Now, we need to import this stateless widget class in our main.dart file and assign it to the home option of the MaterialApp widget as shown in the code snippet below:
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true),
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
Now if we re-run the app, we will get the following result in our emulator screen.
Adding the fl_chart Plugin
Since we are going to add charts to our app, we are going to use the package called fl_chart. This package is a Material Design data visualization library written natively in Dart. It provides a wide range of charts for data visualization which is lightweight and easy to configure as well. Now in order to install this library into our flutter project, we need to add the dependency to our pubspec.yaml file as directed in the code snippet below:
dependencies:
flutter:
sdk: flutter
fl_chart: 0.69.0
After successful installation, we are ready to use the chart widgets offered by this package.
Bar Charts in Flutter
In this section, we are going to learn how to add a bar chart to our Flutter app. Firstly, we are going to create a model file that defines attributes of the data to be shown in the bar chart. Here, we are going to name the file bitcoin_price_series.dart. Inside, we are going to define a class called BitcoinPriceSeries that takes in three parameters – month, price, and color. The overall code implementation is shown in the code snippet below:
import 'package:flutter/material.dart';
class BitcoinPriceSeries {
final String month;
final double price;
final Color barColor;
BitcoinPriceSeries({
required this.month,
required this.price,
required this.barColor,
});
}
Now, we need to create a new file called bitcoin_price_chart.dart to define the chart structure. Here, we are going to implement a stateless widget called BitcoinPriceChart that returns the Bar chart with series value. The overall implementation is provided in the code snippet below:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'bitcoin_price_series.dart';
class BitcoinBarChart extends StatelessWidget {
final List<BitcoinPriceSeries> data;
const BitcoinBarChart({super.key, required this.data});
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.5,
child: Card(
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
color: const Color(0xFF2C3E50),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const Text(
'Bitcoin Price from Jan to March (2024)',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 38),
Expanded(
child: BarChart(
BarChartData(
alignment: BarChartAlignment.spaceAround,
maxY: data.map((e) => e.price).reduce((a, b) => a > b ? a : b) * 1.2,
barTouchData: BarTouchData(
enabled: true,
touchTooltipData: BarTouchTooltipData(
getTooltipItem: (group, groupIndex, rod, rodIndex) {
return BarTooltipItem(
'${data[group.x].month}\n',
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
),
children: <TextSpan>[
TextSpan(
text: (rod.toY).round().toString(),
style: const TextStyle(
color: Colors.yellow,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
],
);
},
),
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (double value, TitleMeta meta) {
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: Text(
data[value.toInt()].month,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
);
},
reservedSize: 40,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (double value, TitleMeta meta) {
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: Text(
'${(value / 1000).toStringAsFixed(0)}K',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
);
},
reservedSize: 56,
),
),
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
),
gridData: FlGridData(
show: true,
drawVerticalLine: false,
horizontalInterval: 10000,
getDrawingHorizontalLine: (value) {
return const FlLine(
color: Color(0xFF37434D),
strokeWidth: 1,
);
},
),
borderData: FlBorderData(
show: false,
),
barGroups: data
.asMap()
.entries
.map((entry) => BarChartGroupData(
x: entry.key,
barRods: [
BarChartRodData(
toY: entry.value.price,
gradient: LinearGradient(
colors: [
entry.value.barColor.withOpacity(0.7),
entry.value.barColor,
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
width: 32,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(6),
topRight: Radius.circular(6),
),
)
],
))
.toList(),
),
),
),
],
),
),
),
);
}
}
Now, we are going to add the Bar chart to our home page. For that, we need to import the BitcoinPriceChart stateless class widget into the home_page.dart file. After import, we can define the list that stores the data based on BitcoinPriceSeries model. Lastly, we need to add the BitcoinPriceChart widget to the body of the Scaffold in the home page by passing the required list data. Final look of the HomePage class would look like
import 'package:flutter/material.dart';
import 'bitcoin_bar_chart.dart';
import 'bitcoin_price_series.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
Widget build(BuildContext context) {
final List<BitcoinPriceSeries> bitcoinData = [
BitcoinPriceSeries(month: 'Jan', price: 50000, barColor: Colors.red),
BitcoinPriceSeries(month: 'Feb', price: 60000, barColor: Colors.blue),
BitcoinPriceSeries(month: 'Mar', price: 58000, barColor: Colors.green),
];
return Scaffold(
appBar: AppBar(
title: const Text("Bitcoin price from Jan to March (2024)"),
),
body: Center(
child: BitcoinBarChart(data: bitcoinData),
),
);
}
}
Hence, we will get the bar chart on our home screen as demonstrated in the emulator screenshot below.
Hence, we have successfully added a bar chart to our Flutter app.
Pie Charts in Flutter
Now that we know how to configure the data for the bar chart, we can easily add a pie chart as well using the exact same series list data. The bar chart data series and pie chart data series share the same format of data. Hence, we can simply add a pie chart using the PieChart widget offered by charts library supplying series list and animate boolean parameters as shown in the code snippet below:
class BitcoinPieChart extends StatelessWidget {
final List<BitcoinPriceSeries> data;
const BitcoinPieChart({super.key, required this.data});
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.5,
child: Card(
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
color: const Color(0xFF2C3E50),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const Text(
'Bitcoin Price Distribution',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 38),
Expanded(
child: PieChart(
PieChartData(
sectionsSpace: 0,
centerSpaceRadius: 40,
sections: _generatePieChartSections(),
),
),
),
],
),
),
),
);
}
List<PieChartSectionData> _generatePieChartSections() {
return data.asMap().entries.map((entry) {
final isTouched = false;
final fontSize = isTouched ? 25.0 : 16.0;
final radius = isTouched ? 60.0 : 50.0;
final total = data.map((e) => e.price).reduce((a, b) => a + b);
final percentage = (entry.value.price / total * 100).toStringAsFixed(1);
return PieChartSectionData(
color: entry.value.barColor,
value: entry.value.price,
title: '$percentage%',
radius: radius,
titleStyle: TextStyle(
fontSize: fontSize,
fontWeight: FontWeight.bold,
color: const Color(0xffffffff),
),
);
}).toList();
}
}
Note that, this PieChart widget was directly added to the bitcoin_price_chart.dart file just below the BarChart widget inside the Column widget.
Finally on our home_page.dart:
import 'package:flutter/material.dart';
import 'bitcoin_bar_chart.dart';
import 'bitcoin_price_series.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
Widget build(BuildContext context) {
final List<BitcoinPriceSeries> bitcoinData = [
BitcoinPriceSeries(month: 'Jan', price: 50000, barColor: Colors.red),
BitcoinPriceSeries(month: 'Feb', price: 60000, barColor: Colors.blue),
BitcoinPriceSeries(month: 'Mar', price: 58000, barColor: Colors.green),
];
return Scaffold(
appBar: AppBar(
title: const Text("Bitcoin price from Jan to March (2024)"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BitcoinBarChart(data: bitcoinData),
const SizedBox(height: 20),
BitcoinPieChart(data: bitcoinData),
],
),
);
}
}
Hence, we have successfully added a pie chart to our Flutter app as well.
Conclusion
The main goal of this tutorial was to demonstrate how to implement various charts in Flutter. The availability of the fl_chart library made it easier to add charts to our Flutter app. The series-based data configuration along with lightweight widgets for a wide variety of widgets makes this library very powerful and efficient as well. Here, we learned how to add a bar chart and a pie chart. We also learned how to configure the series-based data to feed to chart widgets. Now the challenge is to add other types of charts to the Flutter application. The concept for adding the chart widget is the same but the data configuration might be a bit different.
Happy coding! 🚀