As a developer, one is sure to encounter tasks related to charts and graphs at some point. In this tutorial, we are going to tackle the task of creating bar graph or bar chart inside a flutter app.
You might also be interested in drawing pie charts for which I've already written a complete tutorial here on fluttercentral.
* *
Moving on, let's see the illustration of what we are going to achieve with this tutorial. It's a nice little bar chart with a simple animation.
![](../../../Uploads/f921ba7d-7d83-4826-83da-8bc0a69f6f85.gifwidth="50%height="auto](
The chart will represent the number of mobile apps downloads in billions in the past 3 years.
STEPS TO FOLLOW TO CREATE A BAR GRAPH IN FLUTTER
- Your first step will be to import the **charts_flutter package. **You can do it by adding package dependency in your projects **pubspec.yaml **file.
font-size: 1rem;](2. Let's create a model class for our data.
font-weight: bolder;](Please note: You are free to create a separate file for the model class, but for the sake of keeping the tutorial simple I'll be piling up the entire code in a single file. font-weight: bolder;](3. Add the MaterialApp widget and BarGraphDemo in your font-weight: bolder;](main.dart file. Here we will import our package as charts.
runApp(MyApp());
class MyApp extends StatefulWidget { MyApp() : super(key: key);
@override _MyAppState createState() => _MyAppState(); }
class _MyAppState extends State { @override Widget build(BuildContext context) { return MaterialApp( title: 'Bar Graph Demo', debugShowCheckedModeBanner: false, home: BarGraphDemo(), theme: ThemeData( primaryColor: Colors.blue, ), ); } }
class BarGraphDemo extends StatefulWidget { BarGraphDemo() : super(key: key);
@override _BarGraphDemoState createState() => _BarGraphDemoState(); }
class _BarGraphDemoState extends State { List data;
@override void initState() { super.initState();
data = [ AppDownloads( year: '2017', count: 178.1, barColor: charts.ColorUtil.fromDartColor(Colors.red), ), AppDownloads( year: '2018', count: 205.4, barColor: charts.ColorUtil.fromDartColor(Colors.blue), ), AppDownloads( year: '2019', count: 258.2, barColor: charts.ColorUtil.fromDartColor(Colors.green), ), ];
}
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Bar Graph Demo'), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( height: 200, width: double.infinity, padding: const EdgeInsets.all(12), child: Card( child: MyBarChart(data), ), ), Padding( padding: const EdgeInsets.all(16.0), child: Center( child: Text( 'Number of Mobile App Downloads in past 3 years (Data Source: Statista)', textAlign: TextAlign.center, ), ), ), ], ), ); } }
background-color: rgb(17, 33, 33); font-size: 1rem; font-weight: bolder;](4. font-size: 1rem;](Finally, create the font-size: 1rem;]( background-color: rgb(17, 33, 33); font-size: 1rem; font-weight: bolder;](MyBarChart class font-size: 1rem;](which we are using inside our BarGraphDemo class.
font-size: 1rem;](
That's it. You are good to go with this tutorial to draw your own bar charts in flutter. Leave your questions in comments :) Keep Fluttering!
