Animated Bar Chart In Flutter
Flutter empowers developers to create high-quality application UIs for iOS and Android. A considerable lot of the Flutter applications being made inside at Google present a lot of information. Doing that effectively requires ordinary UI widgets, however, loads of exquisite charts.
Insights assume a significant function in our everyday life as it encourages us to comprehend information which is fundamental for people to endure. Perception of the details is significant as it encourages us to comprehend the information. Perception is a cycle of plotting and drawing different sorts of curves/charts/graphs/plots for the offered information to make it reasonable.
In this article, we will explore the Animated Bar Chart In Flutter. We will also implement a demo of the bar chart using the charts_flutter package in your flutter applications.
charts_flutter | Flutter Package
Material Design data visualization library is written natively in Dart. See the online gallery. The /example/ folder…pub.dev
Table Of Contents::
Charts
Charts and Graphs are one of the significant parts of numerous applications in reality. Some genuine world applications like Medium, StackOverflow, GitHub, and so on use Graphs and Charts in countless use cases. Taking a gander at crude information can be truly disappointing and convoluted. In this way, the utilization of pictures, graphs, and charts in applications can generally give excellent experiences in the information we are working on.
Flutter being an excellent UI structure of the advanced period, gives an enormous number of choices to work with graphs and charts exquisitely. One can make some extremely incredible user encounters with Graphs and Charts utilizing Flutter with local execution. To work with charts and graphs in Flutter, we have a few choices, yet we will be mainly focusing on the bar charts in this article.
Demo Module ::
This video shows how to create a bar chart in a flutter and shows how to bar chart will work in your flutter applications with animation, and then they will be shown on your device.
Chart Types
Charts for Flutter upholds three carts types, each with a few setup choices:
- > Bar charts: A bar chart is a method of summing up a bunch of clear cut information (nonstop information can be made absolute via auto-binning). The bar chart shows information utilizing various bars, each representing a specific class. This graph incorporates uphold for stacking a few information series, demonstrating objective lines, and delivering the bars evenly.
- > Line Charts: A line chart is a graphical portrayal of a resource’s verifiable value activity that interfaces a progression of information focus with a constant line. This is the essential kind of chart utilized in money and ordinarily portrays a security’s end costs over a long time, in this chart, including support for time series.
- > Pie Chart: A pie chart (or a circle chart) is a circular factual, realistic, separated into cuts to show mathematical extent. In a pie chart, each cut’s curve length (and thus its focal point and region) corresponds to the amount it represents.
Note: We will only describe the bar chart in flutter.
Implementation:
Step 1: Add the dependencies
=Add dependencies to pubspec — yaml file.
dependencies:
charts_flutter: ^latest version
Step 2: Import
import 'package:charts_flutter/flutter.dart'
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called bar_chart_model.dart inside the lib folder.
Before plotting the bar-chart, we will initially set up the information. For that, we will characterize a class BarChartModel as we are plotting the bar chart demo information.
import 'package:charts_flutter/flutter.dart' as charts;
class BarChartModel {
String month;
String year;
int financial;
final charts.Color color;
BarChartModel({this.month,
this.year, this.financial,
this.color,}
);
}
After characterizing the class, we will characterize some dummy information inside a list, which we will plot in the bar-chat.
final List<BarChartModel> data = [
BarChartModel(
year: "2014",
financial: 250,
color: charts.ColorUtil.fromDartColor
(Color(0xFF47505F)),
),
BarChartModel(
year: "2015",
financial: 300,
color: charts.ColorUtil.fromDartColor
(Colors.red),
),
BarChartModel(
year: "2016",
financial: 100,
color: charts.ColorUtil.fromDartColor
(Colors.green),
),
BarChartModel(
year: "2017",
financial: 450,
color: charts.ColorUtil.fromDartColor
(Colors.yellow),
),
BarChartModel(
year: "2018",
financial: 630,
color: charts.ColorUtil.fromDartColor
(Colors.lightBlueAccent),
),
BarChartModel(
year: "2019",
financial: 1000,
color: charts.ColorUtil.fromDartColor
(Colors.pink),
),
BarChartModel(
year: "2020",
financial: 400,
color: charts.ColorUtil.fromDartColor
(Colors.purple),
),
];
In the wake of setting up the plot’s information, we will be dealing with the plot’s UI.
Create a new dart file called bar_chart_graph.dart inside the lib folder.
List<charts.Series<BarChartModel, String>> series = [
charts.Series(
id: "Financial",
data: widget.data,
domainFn: (BarChartModel series, _) => series.year,
measureFn: (BarChartModel series, _) => series.financial,
colorFn: (BarChartModel series, _) => series.color),
];
return _buildFinancialList(series);
}
Above code, we will define in build function method. Also, there’s a widget _buildFinancialList(), which is defined below.
Let’s declare _buildFinancialList() widget .
Widget _buildFinancialList(series) {
return _barChartList != null
? ListView.separated(
physics: NeverScrollableScrollPhysics(),
separatorBuilder: (context, index) => Divider(
color: Colors.white,
height: 5,
),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _barChartList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: MediaQuery.of(context).size.height/ 2.3,
padding: EdgeInsets.all(10),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_barChartList[index].month,
style: TextStyle(
color: Colors.black, fontSize: 22,
fontWeight: FontWeight.bold)
),
],
),
Expanded( child: charts.BarChart(series,
animate: true)
),
],
),
);
},
)
: SizedBox();
}
In the above bit of code, we utilize the BarChart() widget to plot the bar-chart, which gives us many choices to alter the graph. Different alternatives and modifications should likewise be possible in the chart utilizing the properties of this widget.
Now we will call class BarChartGraph() in bar_chart_demo.dartinside the lib folder.
Container(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
BarChartGraph(
data: data,
),
],
),
),
Now, run the code and get the output on your devices.
Code File
import 'package:flutter/material.dart';
import 'package:flutter_animated_bar_chart/bar_chart_graph.dart';
import 'package:flutter_animated_bar_chart/bar_chart_model.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class BarChartDemo extends StatefulWidget {
@override
_BarChartDemoState createState() => _BarChartDemoState();
}
class _BarChartDemoState extends State<BarChartDemo> {
final List<BarChartModel> data = [
BarChartModel(
year: "2014",
financial: 250,
color: charts.ColorUtil.fromDartColor(Color(0xFF47505F)),
),
BarChartModel(
year: "2015",
financial: 300,
color: charts.ColorUtil.fromDartColor(Colors.red),
),
BarChartModel(
year: "2016",
financial: 100,
color: charts.ColorUtil.fromDartColor(Colors.green),
),
BarChartModel(
year: "2017",
financial: 450,
color: charts.ColorUtil.fromDartColor(Colors.yellow),
),
BarChartModel(
year: "2018",
financial: 630,
color: charts.ColorUtil.fromDartColor(Colors.lightBlueAccent),
),
BarChartModel(
year: "2019",
financial: 1000,
color: charts.ColorUtil.fromDartColor(Colors.pink),
),
BarChartModel(
year: "2020",
financial: 400,
color: charts.ColorUtil.fromDartColor(Colors.purple),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Animated Bar Chart Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Container(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
BarChartGraph(
data: data,
),
],
),
),
),
);
}
}
Conclusion :
In the article, I have explained the structure of an Animated Bar Chart; you can modify this code according to your choice. This was a small introduction to Animated Bar Chart On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Animated Bar Chart in your flutter projects. This is a demo program to use charts_flutter packages in a flutter and show how an animated bar chart will work 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.
find the source code of the Flutter Animated Bar Chart Demo:
flutter-devs/flutter_animated_bar_chart_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
