When it comes to user interface design, charts play an important role. They help to present data in a visually appealing way that is easy to understand. For mobile developers, Flutter offers an excellent library for creating charts called FL Chart. This library allows developers to quickly and easily create a variety of charts from simple line and bar graphs to more complex categories and radial charts.
In this guide, I will walk you through the basics of using FL Chart and show you how to create and customize beautiful charts in your Flutter apps. By the end of this tutorial, you will have a solid understanding of how to use FL Chart.
Before we get started, it is important to note that FL Chart is open-source and free to use. And, as with all good Flutter packages, it comes with good API documentation and examples.
What is FL Chart?
FL Chart is an open-source Flutter library that makes it easy to create beautiful, interactive charts and graphs. It uses an intuitive API and contains the following chart types out of the box:
- Line Chart
- Bar Chart
- Pie Chart
- Scatter Plot
- Donut Chart
- Radar Chart
- Candlestick Chart
- Spline Chart
- Smooth Line Chart
It also includes additional features such as animations, automatic labeling, and cross-platform compatibility. All of this makes FL Chart a great choice for adding visually appealing, interactive charts to your Flutter apps.
Getting Started with FL Chart
The first step is to add the FL Chart package to your project’s pubspec.yaml file:
dependencies:
fl_chart: "^0.9.0"Once that’s done, you can run flutter packages get to install the package.
Creating a Basic Line Chart
Now that the package is installed, let’s walk through creating a basic line chart. To do this, we are going to use the Line Chart widget provided by the package.
Start by creating a new file called main.dart. Then, add the following code:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FL Chart Line Chart')),
body: Center(child: LineChartSample1()),
),
);
}
}
class LineChartSample1 extends StatefulWidget {
@override
_LineChartSample1State createState() => _LineChartSample1State();
}
class _LineChartSample1State extends State<LineChartSample1> {
List<Color> gradientColors = [
const Color(0xff23b6e6),
const Color(0xff02d39a),
];
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
padding: const EdgeInsets.all(20),
child: LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(1, 4),
FlSpot(2, 3),
FlSpot(3, 4.5),
FlSpot(4, 5),
],
isCurved: true,
curveSmoothness: 0.2,
barWidth: 8,
colors: gradientColors,
show: true,
),
],
),
),
);
}
}We’ve created a basic line chart with just a few lines of code. Let’s take a look at what’s going on here.
First, we created the FlLineChart widget and passed it an array of LineChartBarData objects. The LineChartBarData object contains properties like spots and colors that define our data points and the look of our chart.
Next, we set the isCurved, curveSmoothness, and barWidth properties to give our chart a more pleasing look.
Finally, we added the show property to make sure the chart is visible.
Customizing the Look of Your Line Chart
Now that we’ve got a basic chart working, let’s look at how to customize the look of our chart.
Let’s start by introducing a background color and grid lines to our chart:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FL Chart Line Chart')),
body: Center(child: LineChartSample1()),
),
);
}
}
class LineChartSample1 extends StatefulWidget {
@override
_LineChartSample1State createState() => _LineChartSample1State();
}
class _LineChartSample1State extends State<LineChartSample1> {
List<Color> gradientColors = [
const Color(0xff23b6e6),
const Color(0xff02d39a),
];
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
padding: const EdgeInsets.all(20),
child: LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(1, 4),
FlSpot(2, 3),
FlSpot(3, 4.5),
FlSpot(4, 5),
],
isCurved: true,
curveSmoothness: 0.2,
barWidth: 8,
heading: const FlHeading(
title: Text('Value'),
color: Colors.grey,
backColor: Colors.white,
fontSize: 15,
),
colors: gradientColors,
spotsLine: const FlDotData(
show: true,
),
gridData: FlGridData(
show: true,
drawVerticalGrid: true,
drawHorizontalGrid: true,
verticalInterval: 1,
),
bottomTitlesData: FlTitlesData(
show: true,
bottomTitles: const SideTitles(
showTitles: true,
textStyle: TextStyle(
color: Colors.grey,
fontSize: 14,
fontWeight: FontWeight.bold,
),
margin: 20,
getTitles: (value) {
switch (value.toInt()) {
case 1:
return 'JAN';
case 2:
return 'FEB';
case 3:
return 'MAR';
case 4:
return 'APR';
default:
return '';
}
},
),
),
show: true,
),
],
titlesData: FlTitlesData(
show: true,
leftTitles: const SideTitles(
showTitles: true,
textStyle: TextStyle(
color: Colors.indigo,
fontSize: 14,
fontWeight: FontWeight.bold,
),
margin: 0,
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1';
case 2:
return '2';
case 3:
return '3';
case 4:
return '4';
case 5:
return '5';
default:
return '';
}
},
),
rightTitles: const SideTitles(
showTitles: true,
textStyle: TextStyle(
color: Colors.indigo,
fontSize: 14,
fontWeight: FontWeight.bold,
),
margin: 0,
getTitles: (value) {
switch (value.toInt()) {
case 1:
return '1';
case 2:
return '2';
case 3:
return '3';
case 4:
return '4';
case 5:
return '5';
default:
return '';
}
},
),
backgroundColor: Colors.white,
),
),
),
);
}
}
Here we’ve added a background color and grid lines to our chart and also added headings, labels, and titles for our X and Y axes. This is just the beginning of what you can do with FL Chart. There’s lots more you can do to customize your charts.
Conclusion
In this tutorial, we walked through the basics of using FL Chart to create and customize beautiful, interactive charts in Flutter. We learned how to use the Line Chart widget to create basic line charts and how to customize their look with colors and labels.
FL Chart is a great option for creating charts in Flutter and is easy to set up. With its intuitive API and a wide variety of chart types, you can quickly create app-ready charts that will help your app stand out.
Hey!, Do you know the difference between React and React Native?
