Animated Chart In Flutter
In this article, we will be exploring Animated Chart In Flutter using the fl_chart_package. With the help of this package, we can easily achieve charts and describes some properties and how to use them in your flutter applications. So let’s get started.
fl_chart | Flutter Package
💥 A library to draw fantastic charts in Flutter 💥 ScatterChart Coming Soon Read More Banner designed by…pub.dev
Table Of Contents :
FL Chart :
A chart can take various types, however, in general, the chart is a graphical representation of data. Charts tell the user what is the magnitude of data to better understand and predict current and future data. We can show the data through many types of charts such as pie charts, bar charts, line charts, etc. Let us explain all these charts detail in below.
Types Of Chart :
There are a wide variety of charts available to display data. The list below contains those that are most popular and supported by many programs.
- Pie Chart: The pie chart is a circle chart. It is a circular chart cut into sections. Each part represents us as a percentage.
- Line Chart: A-line chart, alternatively referred to as a line graph, is a graphical depiction of the verified value movements of a line chart resource. It disrupts the information focus with a continuous line displays the value axis displayed on the left side of the chart.
- Bar Chart: A bar chart is alternatively known as a graph, a bar chart is a way of grouping clear-cut information into a group. It shows horizontal or vertical bars across the chart horizontally. Displayed at the bottom of the chart. With value.
- Scatter Chart: A scatter chart is a kind of plot or mathematical diagram in which two variable values for a data set are displayed using cartesian coordinates. We use a scatter chart to show the correlation between variables and visualize groups of data points.
Demo Module ::
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
fl_chart: latest version
Step 2: Import
import 'package:fl_chart/fl_chart.dart';
Step 3: Run flutter packages get in the root directory of your app.
Code implement in dart file :
Create a new dart file called home_page.dart inside the lib folder.
First of all, we will create four buttons on the home page screen. And we will discuss different charts on each button.
Pie Chart :
In the pie chart, we will use the pie chart class which contains its subclass pie chart data which has section properties in which the list is initialized. In which we have given the color and value of each section.
PieChart(
PieChartData(
pieTouchData: PieTouchData(touchCallback: (pieTouchResponse) {
setState(() {
if (pieTouchResponse.touchInput is FlLongPressEnd ||
pieTouchResponse.touchInput is FlPanEnd) {
touchedIndex = -1;
} else {
touchedIndex = pieTouchResponse.touchedSectionIndex;
}
});
}),
borderData: FlBorderData(
show: false,
),
sectionsSpace: 0,
centerSpaceRadius: 60,
sections: showingSections()),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Line Chart :
In the line chart, we will use the line chart class which contains its subclass line chart data in which the x-axis data has been initialized in the titles data properties. While the properties of the left tile have data of the Y-axis. We have initialized the color and line of the bar.
LineChart(
LineChartData(
lineTouchData: LineTouchData(enabled: true),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, 1),
FlSpot(1, 1),
FlSpot(2, 3),
FlSpot(3, 4),
FlSpot(3, 5),
FlSpot(4, 4)
],
isCurved: true,
barWidth: 2,
colors: [
Colors.orange,
],
belowBarData: BarAreaData(
show: true,
colors: [Colors.lightBlue.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.lightGreen.withOpacity(0.5)],
cutOffY: cutOffYValue,
applyCutOffY: true,
),
dotData: FlDotData(
show: false,
),
),
],
minY: 0,
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 5,
// textStyle: yearTextStyle,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2016';
case 1:
return '2017';
default:
return '';
}
}),
leftTitles: SideTitles(
showTitles: true,
getTitles: (value) {
return '\$ ${value + 100}';
},
),
),
axisTitleData: FlAxisTitleData(
leftTitle: AxisTitle(
showTitle: true, titleText: 'Value', margin: 10),
bottomTitle: AxisTitle(
showTitle: true,
margin: 10,
titleText: 'Year',
textStyle: yearTextStyle,
textAlign: TextAlign.right)),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (double value) {
return value == 1 || value == 2 || value == 3 || value == 4;
},
),
),
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Bar Chart:
In the above, we have used the bar chart class to plot the bar chart. The subclass of which is bar chart data which helps us to change bar chart data graph and gives many options. Using the properties of this widget the user can make modifications as we have used bar touch data and titles data properties.
BarChart(
BarChartData(
maxY: 20,
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.grey,
getTooltipItem: (_a, _b, _c, _d) => null,
),
touchCallback: (response) {
if (response.spot == null) {
setState(() {
touchedGroupIndex = -1;
showingBarGroups = List.of(rawBarGroups);
});
return;
}
});
}),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(
color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 12),
margin: 20,
getTitles: (double value) {
switch (value.toInt()) {
case 0:
return '2015';
return '';
}
},
),
leftTitles: SideTitles(
showTitles: true,
getTextStyles: (value) => const TextStyle(
color: Colors.white70, fontWeight: FontWeight.bold, fontSize: 14),
margin: 32,
reservedSize: 11,
getTitles: (value) {
if (value == 0) {
return '1K';
} else if (value == 10) {
return '5K';
} else if (value == 19) {
return '10K';
} else {
return '';
}
},
),
),
borderData: FlBorderData(
show: false,
),
barGroups: showingBarGroups,
),
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Scatter Chart :
In the above, we have used the scatter chart class whose subclass is the scatter chart data which helps us to change the bar chart data graph and gives many options the user can modify using the properties of this widget as we have the bar scatters used the spots property which is of type and used the scatter touch data property which can change the color and value of the data touched by the user.
ScatterChart(
ScatterChartData(
scatterSpots: [],
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
borderData: FlBorderData(
show: false,
),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
checkToShowHorizontalLine: (value) => true,
getDrawingHorizontalLine: (value) => FlLine(color: Colors.white.withOpacity(0.1)),
drawVerticalLine: true,
checkToShowVerticalLine: (value) => true,
getDrawingVerticalLine: (value) => FlLine(color: Colors.white.withOpacity(0.1)),
),
titlesData: FlTitlesData(
show: false,
),
showingTooltipIndicators: selectedSpots,
scatterTouchData: ScatterTouchData(
enabled: true,
handleBuiltInTouches: false,
touchTooltipData: ScatterTouchTooltipData(
tooltipBgColor: Colors.black,
),
touchCallback: (ScatterTouchResponse touchResponse) {
},
),
),
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code file :
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class ScatterChartPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ScatterChartPageState();
}
class _ScatterChartPageState extends State {
int touchedIndex;
Color greyColor = Colors.grey;
List<int> selectedSpots = [];
int lastPanStartOnIndex = -1;
double _height;
double _width;
@override
Widget build(BuildContext context) {
_width = MediaQuery.of(context).size.width;
_height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: Text('Scatter Chart Demo'),
),
body: Container(
//alignment:Alignment.center,
height: _height / 2.2,
width: _width,
margin: EdgeInsets.symmetric(vertical: 80, horizontal: 15),
child: Card(
color: Colors.black54,
child: ScatterChart(
ScatterChartData(
scatterSpots: [
ScatterSpot(
4,
5,
color: selectedSpots.contains(2)
? Colors.purpleAccent
: greyColor,
radius: 8,
),
ScatterSpot(
8,
6,
color: selectedSpots.contains(3) ?
Colors.orange : greyColor,
radius: 20,
),
ScatterSpot(
5,
7,
color: selectedSpots.contains(4) ?
Colors.brown : greyColor,
radius: 14,
),
ScatterSpot(
7,
2,
color: selectedSpots.contains(5)
? Colors.lightGreenAccent
: greyColor,
radius: 18,
),
ScatterSpot(
3,
2,
color: selectedSpots.contains(6) ?
Colors.red : greyColor,
radius: 36,
),
],
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
borderData: FlBorderData(
show: false,
),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
checkToShowHorizontalLine: (value) => true,
getDrawingHorizontalLine: (value) =>
FlLine(color: Colors.white.withOpacity(0.1)),
drawVerticalLine: true,
checkToShowVerticalLine: (value) => true,
getDrawingVerticalLine: (value) =>
FlLine(color: Colors.white.withOpacity(0.1)),
),
titlesData: FlTitlesData(
show: false,
),
showingTooltipIndicators: selectedSpots,
scatterTouchData: ScatterTouchData(
enabled: true,
handleBuiltInTouches: false,
touchTooltipData: ScatterTouchTooltipData(
tooltipBgColor: Colors.black,
),
touchCallback: (ScatterTouchResponse touchResponse) {
if (touchResponse.touchInput is FlPanStart) {
lastPanStartOnIndex = touchResponse.
touchedSpotIndex;
} else if (touchResponse.touchInput is FlPanEnd) {
final FlPanEnd flPanEnd =
touchResponse.touchInput;
if (flPanEnd.velocity.pixelsPerSecond <=
const Offset(4, 4)) {
// Tap happened
setState(() {
if (selectedSpots.contains
(lastPanStartOnIndex)) {
selectedSpots.remove(lastPanStartOnIndex);
} else {
selectedSpots.add(lastPanStartOnIndex);
}
});
}
}
},
),
),
),
),
),
);
}
}
Conclusion :
In this article, I have explained an Animated Chart in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Animated Chart demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Animated Chart in your flutter project. We will show you the Percent Indicator is?, and working on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
