How to create line chart in Flutter
Line charts are an essential visualization tool in mobile app development, clearly representing data trends over time or ordered categories. Flutter, a popular cross-platform UI toolkit, offers a straightforward way to create interactive line charts. In this Answer, we will learn how to create a line chart in Flutter using the fl_chart library. We will walk through the steps, from setting up the project to writing the necessary code to display a simple line chart with data points.
Adding dependency
To begin using line charts, we must install the necessary package. For this purpose, we will open the pubspec.yaml in our Dart project and add the following line under the "dependencies" section:
dependencies
fl_chart:
Leaving the version number empty will automatically install the latest version of the package.
After making the changes, we can install the package in two ways:
Right-click the
pubspec.yamlfile and click on "get packages."Write the following command in the terminal.
flutter pub get
We can skip all the above steps and just run the following command, which will automatically install the latest version of the fl_chart package.
flutter pub add fl_chart
Adding import package statement
Now we can import the package into the Dart file by adding the following line of code in the Dart file where we want to implement the fl_chart function:
import 'package:flutter/material.dart';import 'package:fl_chart/fl_chart.dart';
Define the data for the line chart
Let's assume we have some sample data representing points on the line chart for demonstration purposes. We'll create a simple list of data points (x, y) pairs:
List<FlSpot> chartData = [FlSpot(0, 1),FlSpot(1, 3),FlSpot(2, 10),FlSpot(3, 7),FlSpot(4, 12),FlSpot(5, 13),FlSpot(6, 17),FlSpot(7, 15),FlSpot(8, 20),];
Create the LineChart widget
In our Flutter widget tree, we will now create a new LineChart widget to display the line chart:
Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Educative Line Chart'),),body: Container(padding: const EdgeInsets.all(10),width: double.infinity,height: 300,child: LineChart(LineChartData(borderData: FlBorderData(show: false), lineBarsData: [LineChartBarData(spots: chartData),]),),),),);}
Lines 7-17: Inside the
Container, we use theLineChartwidget to create the line chart. TheLineChartwidget takes aLineChartDataobject as its data.Lines 12-15: The
LineChartDataobject contains the configuration data for the line chart, such as border settings, line bars data, etc. In this case, we setborderDatatoFlBorderData(show: false), which means we hide the border around the chart.Line 13: We define a list of
LineChartBarDataobjects insidelineBarsData. EachLineChartBarDataobject represents a single line on the chart.Line 14: Inside each
LineChartBarData, we define a list ofFlSpotobjects in thespotsproperty. EachFlSpotrepresents a data point on the line chart, withxandycoordinates.
Complete code
We get the following output by putting together the code explained above.
name: flutter_simple_web_app
description: A simple web app with Flutter
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0" # Upgraded to the latest Flutter SDK version
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
fl_chart:
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
Conclusion
Creating line charts in Flutter using the fl_chart library is a powerful way to visualize data trends and patterns. With just a few simple steps, we can integrate line charts into our Flutter apps, enabling users to grasp important insights at a glance. We can further enhance the chart's appearance and interactivity by exploring the various configuration options provided by the fl_chart library.
