Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart are all supported by fl_chart, a highly customisable Flutter chart library.
This post demonstrates how to create basic bar charts in Flutter
using fl chart, one of the most widely used chart plugins today.
Install fl_chart plugin into Flutter
flutter pub add fl_chart
flutter pub get
Import fl_chart
import 'package:fl_chart/fl_chart.dart';
Draw Simple Bar Chart
Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
),
body: Padding(
padding: const EdgeInsets.all(30),
child: BarChart(BarChartData(
borderData: FlBorderData(
border: const Border(
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide(width: 1),
bottom: BorderSide(width: 1),
)),
groupsSpace: 10,
barGroups: [
BarChartGroupData(x: 1, barRods: [
BarChartRodData(y: 10, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 2, barRods: [
BarChartRodData(y: 9, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 3, barRods: [
BarChartRodData(y: 4, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 4, barRods: [
BarChartRodData(y: 2, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 5, barRods: [
BarChartRodData(y: 13, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 6, barRods: [
BarChartRodData(y: 17, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 7, barRods: [
BarChartRodData(y: 19, width: 15, colors: [Colors.amber]),
]),
BarChartGroupData(x: 8, barRods: [
BarChartRodData(y: 21, width: 15, colors: [Colors.amber]),
]),
])),
),
);

Draw Bar Chart Using Dynamic Data
A bar chart rendered using dynamic data is displayed in this example.
// main.dart
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:fl_chart/fl_chart.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'KindaCode.com',
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: HomePage(),
);
}
}
// Define data structure for a bar group
class DataItem {
int x;
double y1;
double y2;
double y3;
DataItem(
{required this.x, required this.y1, required this.y2, required this.y3});
}
class HomePage extends StatelessWidget {
HomePage({Key? key}) : super(key: key);
// Generate dummy data to feed the chart
final List<DataItem> _myData = List.generate(
30,
(index) => DataItem(
x: index,
y1: Random().nextInt(20) + Random().nextDouble(),
y2: Random().nextInt(20) + Random().nextDouble(),
y3: Random().nextInt(20) + Random().nextDouble(),
));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: 3000,
child: BarChart(BarChartData(
borderData: FlBorderData(
border: const Border(
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide(width: 1),
bottom: BorderSide(width: 1),
)),
groupsSpace: 10,
barGroups: _myData
.map((dataItem) =>
BarChartGroupData(x: dataItem.x, barRods: [
BarChartRodData(
y: dataItem.y1,
width: 15,
colors: [Colors.amber]),
BarChartRodData(
y: dataItem.y2, width: 15, colors: [Colors.red]),
BarChartRodData(
y: dataItem.y3, width: 15, colors: [Colors.blue]),
]))
.toList())),
),
),
),
);
}
}

Conclusion
In this article, with the aid of fl chart plugin, we’ve gone over a few instances of using attractive and useful bar charts in Flutter apps. As always, If you have found this article useful do not forget to share it and leave a comment if you have any questions. Happy Coding
Leave a Reply