Animated Bar Chart In Flutter

Use Charts Flutter Package To Create Bar Chart In Flutter Apps

Shaiq khan
Nov 19 · 7 min read
Image for post
Image for post
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 package in your flutter applications.

Table Of Contents::

Charts

Chart Types

Implementation

Code Implement

Code File

Conclusion

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 ::

Image for post
Image for post

This video shows how to create a bar chart in a flutter and show 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: ^0.9.0

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 grade.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.

Image for post
Image for post

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.

Image for post
Image for post
Bar Chart Final output

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:

Feel free to connect with us:
And read more articles from .

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. 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 , , , and for any flutter related queries.

We 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.

Image for post
Image for post

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store