Animated Bar Chart In Flutter
By: Shaiq Khan
Tags: Animated, Bar Chart, Flutter, Dart, Mobile App Development

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.

A is a method of summing up a bunch of clear cut information (nonstop information can be made absolute via auto-binning). The 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.

A is a graphical portrayal of a resource’s verifiable value activity that interfaces a progression of information focus with a constant . This is the essential kind of 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 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.dart inside 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.

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