{"id":1520,"date":"2021-11-18T16:47:33","date_gmt":"2021-11-18T16:47:33","guid":{"rendered":"https:\/\/flutter4fun.com\/?p=1520"},"modified":"2021-11-18T16:47:36","modified_gmt":"2021-11-18T16:47:36","slug":"ui-challenge-7","status":"publish","type":"post","link":"https:\/\/flutter4fun.com\/ui-challenge-7\/","title":{"rendered":"UI Challenge 7 \u2013 Dashboard Chart\/Elements by Rayhanul Islam"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/preview-1024x768.png\" alt=\"\" class=\"wp-image-1523\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/preview-1024x768.png 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/preview-300x225.png 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/preview-768x576.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/preview-86x64.png 86w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/preview.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Hi guys. <\/p>\n\n\n\n<p>Happy to write again!<\/p>\n\n\n\n<p>Today I found this fantastic design from <a rel=\"noreferrer noopener\" href=\"https:\/\/www.uplabs.com\/kabboliate\" data-type=\"URL\" data-id=\"https:\/\/www.uplabs.com\/kabboliate\" target=\"_blank\">Rayhanul Islam<\/a> (check it in the <a rel=\"noreferrer noopener\" href=\"https:\/\/www.uplabs.com\/posts\/dashboard-chart-elements-ui-kit-figma\" data-type=\"URL\" data-id=\"https:\/\/www.uplabs.com\/posts\/dashboard-chart-elements-ui-kit-figma\" target=\"_blank\">Uplabs<\/a>).<\/p>\n\n\n\n<p>In this article, we are going to implement and explain it step by step.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">This session is special because we are going to cover these aspects:<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Implement it in responsive way (to support all screens from mobile to desktop)<\/li><li><span style=\"color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">Use <\/span><a rel=\"noreferrer noopener\" style=\"background-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\" href=\"https:\/\/pub.dev\/packages\/fl_chart\" data-type=\"URL\" data-id=\"https:\/\/pub.dev\/packages\/fl_chart\" target=\"_blank\">fl_chart<\/a><span style=\"color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\"> package to implement the charts.<\/span><\/li><li>Implement dark \/ light themes<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">1. The layout structure<\/h3>\n\n\n\n<p>As you remember, we need to break a big problem into some smaller ones.<br>In this section, we will focus on the layout structure (Nothing more).<\/p>\n\n\n\n<p>As you see we need to make a grid-like layout to show some cards.<br>Each card should be in a 1.7:1 aspect ratio (<code>width = height * 1.7<\/code>).<\/p>\n\n\n\n<p>We can use the <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/GridView-class.html\" target=\"_blank\">GridView<\/a> widget to implement our grid with 2 columns.<br>(notice that GridView has a <code>childAspectRatio<\/code> property to apply the aspect ratio to each child)<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class HomePage extends StatelessWidget {\n  const HomePage({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.blueGrey,\n      body: GridView.count(\n        crossAxisCount: 2,\n        childAspectRatio: 1.7,\n        padding: const EdgeInsets.all(16),\n        crossAxisSpacing: 16,\n        mainAxisSpacing: 16,\n        children: const [\n          Card(),\n          Card(),\n          Card(),\n          Card(),\n        ],\n      ),\n    );\n  }\n}<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/eJhBrsycEFg\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<p>As you may notice, our design is not responsive. In some small devices, we need to show 1 column (instead of 2).<br>To implement it, we need to wrap our <code>GridView<\/code> with a <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/LayoutBuilder-class.html\" data-type=\"URL\" data-id=\"https:\/\/api.flutter.dev\/flutter\/widgets\/LayoutBuilder-class.html\" target=\"_blank\">LayoutBuilder<\/a>. In this way, we have access to  <code>width<\/code> and <code>height<\/code> of our parent view (which is the scaffold&#8217;s body). Then we can check if the width is lower than 800, we should show the grid with 1 column. Otherwise, we show it with 2 columns.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class HomePage extends StatelessWidget {\n  const HomePage({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.blueGrey,\n      body: LayoutBuilder(\n        builder: (context, constraints) {\n          return GridView.count(\n            crossAxisCount: constraints.maxWidth &lt; 800 ? 1 : 2,\n            childAspectRatio: 1.7,\n            padding: const EdgeInsets.all(16),\n            crossAxisSpacing: 16,\n            mainAxisSpacing: 16,\n            children: const [\n              Card(),\n              Card(),\n              Card(),\n              Card(),\n            ],\n          );\n        }\n      ),\n    );\n  }\n}<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/9d0zUBHHY4o\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">2. Fl Chart<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"244\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/fl_chart_landing-1024x244.jpeg\" alt=\"\" class=\"wp-image-1572\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/fl_chart_landing-1024x244.jpeg 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/fl_chart_landing-300x72.jpeg 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/fl_chart_landing-768x183.jpeg 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/fl_chart_landing-1536x367.jpeg 1536w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/fl_chart_landing.jpeg 1952w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/fl_chart\" target=\"_blank\">fl_chart<\/a> package<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\n\n\n\n<p>Now we are ready to implement the charts. We use the <a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/fl_chart\" target=\"_blank\">fl_chart<\/a> package. <\/p>\n\n\n\n<p>The <code>fl_chart<\/code> is a flutter library that allows you to implement different types of charts. At this time, it supports <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md\" target=\"_blank\">LineChart<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md\" target=\"_blank\">BarChart<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/pie_chart.md\" target=\"_blank\">PieChart<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/scatter_chart.md\" target=\"_blank\">ScatterChart<\/a>, and <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/radar_chart.md\" data-type=\"URL\" data-id=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/radar_chart.md\" target=\"_blank\">RadarChart<\/a>.<\/p>\n\n\n\n<p>You can read the library <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/index.md\" data-type=\"URL\" data-id=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/index.md\" target=\"_blank\">documentation<\/a> to get started.<br>Also, you can check our posts about the <code>fl_chart<\/code> <a rel=\"noreferrer noopener\" href=\"https:\/\/flutter4fun.com\/fl-chart\/\" data-type=\"URL\" data-id=\"https:\/\/flutter4fun.com\/fl-chart\/\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p>Let&#8217;s add it to our project. There is an installation guide <a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/fl_chart\/install\" data-type=\"URL\" data-id=\"https:\/\/pub.dev\/packages\/fl_chart\/install\" target=\"_blank\">here<\/a>.<br>We only need to add <code>fl_chart: ^latest_version<\/code> in your <code>pub.dev<\/code> file like below:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">dependencies:\n  fl_chart: ^0.40.2<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><\/div>\n<\/div>\n\n\n\n<p>Now we are ready to import and use it in our project.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'package:fl_chart\/fl_chart.dart';\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. BarChart<\/h3>\n\n\n\n<p>Let&#8217;s start by implementing the first BarChart sample:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"594\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/6-1024x594.png\" alt=\"\" class=\"wp-image-1587\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/6-1024x594.png 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/6-300x174.png 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/6-768x446.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/6.png 1330w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>In the <code>fl_chart<\/code> package, there is a <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#barchartdata\" target=\"_blank\">BarChart<\/a> class that allows you to implement any kind of bar chart (grouped bar chart, stacked bar chart, &#8230;).<br>There is a required argument that you must provide. You must provide a <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#barchartdata\" target=\"_blank\">BarChartData<\/a> to the <code>BarChart<\/code> class like below:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">BarChart(\n  BarChartData(\n    \/\/ Anything that describes the chart\n  ),\n),<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>In the <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#barchartdata\" target=\"_blank\">BarChartData<\/a>, there are a bunch of optional arguments which you can use to customize your chart. <br>You can read about all of them <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p>For example, there is a parameter called <code>barGroups<\/code>. It gets a list of <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#barchartgroupdata\" target=\"_blank\">BarChartGroupData<\/a>. Each group is responsible to show a group of bars. For example below <a href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#sample-2-source-code\" data-type=\"URL\" data-id=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#sample-2-source-code\" target=\"_blank\" rel=\"noreferrer noopener\">sample<\/a> has 7 groups and each group contains two <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#barchartroddata\" target=\"_blank\">BarChartRodData<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/raw\/master\/repo_files\/images\/bar_chart\/bar_chart_sample_2.gif\" alt=\"\" width=\"288\" height=\"288\"\/><\/figure>\n\n\n\n<p>In our design, we need to have 12 barGroups, and each group should contain only 1 rod.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">BarChart(\n  BarChartData(\n    barGroups: [\n      BarChartGroupData(x: 0, barRods: [BarChartRodData(y: 20)]),\n      BarChartGroupData(x: 1, barRods: [BarChartRodData(y: 40)]),\n      BarChartGroupData(x: 2, barRods: [BarChartRodData(y: 30)]),\n      BarChartGroupData(x: 3, barRods: [BarChartRodData(y: 60)]),\n      BarChartGroupData(x: 4, barRods: [BarChartRodData(y: 75)]),\n      BarChartGroupData(x: 5, barRods: [BarChartRodData(y: 35)]),\n      BarChartGroupData(x: 6, barRods: [BarChartRodData(y: 42)]),\n      BarChartGroupData(x: 7, barRods: [BarChartRodData(y: 33)]),\n      BarChartGroupData(x: 8, barRods: [BarChartRodData(y: 60)]),\n      BarChartGroupData(x: 9, barRods: [BarChartRodData(y: 90)]),\n      BarChartGroupData(x: 10, barRods: [BarChartRodData(y: 86)]),\n      BarChartGroupData(x: 11, barRods: [BarChartRodData(y: 120)]),\n    ]\n  ),\n),<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/8-588x1024.png\" alt=\"\" class=\"wp-image-1602\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/8-588x1024.png 588w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/8-172x300.png 172w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/8-768x1338.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/8.png 830w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Great! We need to add some padding to the bottom (we simply can wrap our chart into a <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Padding-class.html\" target=\"_blank\">Padding<\/a> widget). We also need to hide the right titles.<\/p>\n\n\n\n<p>To do that, we can customize the <code>titlesData<\/code> property of our BarChartData. It gets a <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/base_chart.md#FlTitlesData\" target=\"_blank\">FlTitlesData<\/a> which you can customize everything about the titles.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Padding(\n  padding: const EdgeInsets.only(right: 18, top: 18, bottom: 18),\n  child: BarChart(\n    BarChartData(\n      barGroups: [\n        BarChartGroupData(x: 0, barRods: [BarChartRodData(y: 20)]),\n        BarChartGroupData(x: 1, barRods: [BarChartRodData(y: 40)]),\n        BarChartGroupData(x: 2, barRods: [BarChartRodData(y: 30)]),\n        BarChartGroupData(x: 3, barRods: [BarChartRodData(y: 60)]),\n        BarChartGroupData(x: 4, barRods: [BarChartRodData(y: 75)]),\n        BarChartGroupData(x: 5, barRods: [BarChartRodData(y: 35)]),\n        BarChartGroupData(x: 6, barRods: [BarChartRodData(y: 42)]),\n        BarChartGroupData(x: 7, barRods: [BarChartRodData(y: 33)]),\n        BarChartGroupData(x: 8, barRods: [BarChartRodData(y: 60)]),\n        BarChartGroupData(x: 9, barRods: [BarChartRodData(y: 90)]),\n        BarChartGroupData(x: 10, barRods: [BarChartRodData(y: 86)]),\n        BarChartGroupData(x: 11, barRods: [BarChartRodData(y: 120)]),\n      ],\n      titlesData: FlTitlesData(\n        rightTitles: SideTitles(showTitles: false),\n        topTitles: SideTitles(showTitles: false),\n      )\n    ),\n  ),\n),<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"587\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/9-587x1024.png\" alt=\"\" class=\"wp-image-1610\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/9-587x1024.png 587w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/9-172x300.png 172w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/9-768x1339.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/9.png 826w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>It seems better now. At this time, we need to customize the bottom and left titles.<\/p>\n\n\n\n<p><br>Bottom titles should be <code>Jan<\/code>, <code>Feb<\/code>, <code>Mar<\/code>, &#8230; (instead of 1, 2, 3)<\/p>\n\n\n\n<p>To do that, we can override <code>getTitles<\/code> property of <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/base_chart.md#sidetitles\" target=\"_blank\">SideTitles<\/a>. It gives us an x value (which is a double), and gets a string to show at the x value location.<br>We can simply map those numbers to the month names.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">titlesData: FlTitlesData(\n  rightTitles: SideTitles(showTitles: false),\n  topTitles: SideTitles(showTitles: false),\n  bottomTitles: SideTitles(\n    showTitles: true,\n    getTitles: (xValue) {\n      switch (xValue.toInt()) {\n        case 0: return 'Jan';\n        case 1: return 'Feb';\n        case 2: return 'Mar';\n        case 3: return 'Apr';\n        case 4: return 'May';\n        case 5: return 'Jun';\n        case 6: return 'Jul';\n        case 7: return 'Aug';\n        case 8: return 'Sep';\n        case 9: return 'Oct';\n        case 10: return 'Nov';\n        case 11: return 'Dec';\n        default: throw StateError('Not supported');\n      }\n    }\n  )\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/10-964x1024.png\" alt=\"\" class=\"wp-image-1615\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/10-964x1024.png 964w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/10-282x300.png 282w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/10-768x816.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/10.png 1352w\" sizes=\"auto, (max-width: 964px) 100vw, 964px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>We can also override <code>getTextStyles<\/code> to customize the color and size of the titles. For example:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">bottomTitles: SideTitles(\n  showTitles: true,\n  getTitles: (xValue) {\n    switch (xValue.toInt()) {\n      case 0: return 'Jan';\n      case 1: return 'Feb';\n      case 2: return 'Mar';\n      case 3: return 'Apr';\n      case 4: return 'May';\n      case 5: return 'Jun';\n      case 6: return 'Jul';\n      case 7: return 'Aug';\n      case 8: return 'Sep';\n      case 9: return 'Oct';\n      case 10: return 'Nov';\n      case 11: return 'Dec';\n      default: throw StateError('Not supported');\n    }\n  },\n  getTextStyles: (context, xValue) => const TextStyle(\n    color: Colors.pink,\n    fontWeight: FontWeight.bold,\n  ),\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/11-955x1024.png\" alt=\"\" class=\"wp-image-1621\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/11-955x1024.png 955w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/11-280x300.png 280w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/11-768x824.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/11.png 1354w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>As an alternative way, you can change the <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/material\/TextTheme-class.html\" target=\"_blank\">TextTheme<\/a>.bodyText2 in your <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/material\/ThemeData-class.html\" target=\"_blank\">ThemeData<\/a> to change the text styles. (<code>fl_chart<\/code> is theme-aware and updates texts style based on your current theme)<\/p>\n\n\n\n<p>Okay now let&#8217;s modify the left titles.<\/p>\n\n\n\n<p>Left titles should be <code>0<\/code>, <code>20<\/code>, <code>40<\/code>, &#8230; (incremental by 20)<\/p>\n\n\n\n<p>In the SideTitles class, there is an <code>interval<\/code> property that determines the steps between each value.<br>For example in our case, we want to set it to 20.<\/p>\n\n\n\n<p><code>fl_chart<\/code> calculates a perfect number to set the interval based on your chart&#8217;s size to be responsive. <\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/o7OaNXyCyAo\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>But if we change it, it will be always the same value on all screen sizes. We will change it to hard-coded <code>20<\/code>.<\/p>\n\n\n\n<p>As you see <code>100<\/code> and <code>120<\/code> numbers are written in two lines. To solve this issue, we need to increase the <code>reservedSize<\/code> property of our SideTitles to give the chart more space to write numbers.<\/p>\n\n\n\n<p>Here is our result so far:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">child: Card(\n  child: Padding(\n    padding: const EdgeInsets.only(right: 18, top: 18, bottom: 18),\n    child: BarChart(\n      BarChartData(\n        barGroups: [\n          BarChartGroupData(x: 0, barRods: [BarChartRodData(y: 20)]),\n          BarChartGroupData(x: 1, barRods: [BarChartRodData(y: 40)]),\n          BarChartGroupData(x: 2, barRods: [BarChartRodData(y: 30)]),\n          BarChartGroupData(x: 3, barRods: [BarChartRodData(y: 60)]),\n          BarChartGroupData(x: 4, barRods: [BarChartRodData(y: 75)]),\n          BarChartGroupData(x: 5, barRods: [BarChartRodData(y: 35)]),\n          BarChartGroupData(x: 6, barRods: [BarChartRodData(y: 42)]),\n          BarChartGroupData(x: 7, barRods: [BarChartRodData(y: 33)]),\n          BarChartGroupData(x: 8, barRods: [BarChartRodData(y: 60)]),\n          BarChartGroupData(x: 9, barRods: [BarChartRodData(y: 90)]),\n          BarChartGroupData(x: 10, barRods: [BarChartRodData(y: 86)]),\n          BarChartGroupData(x: 11, barRods: [BarChartRodData(y: 120)]),\n        ],\n        titlesData: FlTitlesData(\n          rightTitles: SideTitles(showTitles: false),\n          topTitles: SideTitles(showTitles: false),\n          bottomTitles: SideTitles(\n            reservedSize: 6,\n            showTitles: true,\n            getTitles: (xValue) {\n              switch (xValue.toInt()) {\n                case 0: return 'Jan';\n                case 1: return 'Feb';\n                case 2: return 'Mar';\n                case 3: return 'Apr';\n                case 4: return 'May';\n                case 5: return 'Jun';\n                case 6: return 'Jul';\n                case 7: return 'Aug';\n                case 8: return 'Sep';\n                case 9: return 'Oct';\n                case 10: return 'Nov';\n                case 11: return 'Dec';\n                default: throw StateError('Not supported');\n              }\n            },\n          ),\n          leftTitles: SideTitles(\n            showTitles: true,\n            interval: 20,\n            reservedSize: 32\n          )\n        )\n      ),\n    ),\n  ),\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/13-794x1024.png\" alt=\"\" class=\"wp-image-1636\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/13-794x1024.png 794w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/13-233x300.png 233w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/13-768x991.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/13.png 1130w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Now to be pixel-perfect on the design, we need to add another number on the left side. We need to show <code>140<\/code> as well.<\/p>\n\n\n\n<p>To do that, we should customize the max value of the y axis. (It is calculated based on your provided data by default)<\/p>\n\n\n\n<p>We can change <code>maxY<\/code> property to 140 in our BarChartData class.<br>(Because in our provided data, the max value is 120 and that&#8217;s not what we want)<\/p>\n\n\n\n<p>Now let&#8217;s remove the background grid lines. <\/p>\n\n\n\n<p>In <code>BarChartData<\/code> class, we can use <code>gridData<\/code> property to customize the grid lines behind the chart.<br>We also need to use <code>borderData<\/code> property to remove the border lines around the chart.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">BarChart(\n  BarChartData(\n    barGroups: [ ... ],\n    titlesData: FlTitlesData(...),\n    maxY: 140,\n    gridData: FlGridData(show: false),\n    borderData: FlBorderData(show: false),\n  ),\n),<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/14-790x1024.png\" alt=\"\" class=\"wp-image-1641\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/14-790x1024.png 790w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/14-231x300.png 231w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/14-768x995.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/14.png 1122w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Great! At this point, we need to change our bars style. Let&#8217;s back to our <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md#barchartroddata\" target=\"_blank\">BarChartRodData<\/a> class.<\/p>\n\n\n\n<p>There are a bunch of properties that help us to customize each bar.<\/p>\n\n\n\n<p>For example, we use:<br><code>colors<\/code> to implement the yellow gradient (If you provide one color, it is a solid color).<br><code>borderRadius<\/code> to change the roundness of the bars.<br><code>width<\/code> to change the thickness of the bars<br>And lastly, we use <code>backDrawRodData<\/code> to draw a rod behind them.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">BarChartRodData makeRodData(double y) {\n  return BarChartRodData(\n    y: y,\n    colors: [\n      const Color(0xFFFFAB5E),\n      const Color(0xFFFFD336),\n    ],\n    width: 14,\n    borderRadius: BorderRadius.circular(2),\n    backDrawRodData: BackgroundBarChartRodData(\n      show: true,\n      colors: [const Color(0xFFFCFCFC)],\n      y: 140\n    )\n  );\n}\n\nBarChart(\n  BarChartData(\n    barGroups: [\n      BarChartGroupData(x: 0, barRods: [makeRodData(20)]),\n      BarChartGroupData(x: 1, barRods: [makeRodData(40)]),\n      BarChartGroupData(x: 2, barRods: [makeRodData(30)]),\n      BarChartGroupData(x: 3, barRods: [makeRodData(60)]),\n      BarChartGroupData(x: 4, barRods: [makeRodData(75)]),\n      BarChartGroupData(x: 5, barRods: [makeRodData(35)]),\n      BarChartGroupData(x: 6, barRods: [makeRodData(42)]),\n      BarChartGroupData(x: 7, barRods: [makeRodData(33)]),\n      BarChartGroupData(x: 8, barRods: [makeRodData(60)]),\n      BarChartGroupData(x: 9, barRods: [makeRodData(90)]),\n      BarChartGroupData(x: 10, barRods: [makeRodData(86)]),\n      BarChartGroupData(x: 11, barRods: [makeRodData(120)]),\n    ],\n    ..\n  ),\n)\n<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"864\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/16-864x1024.png\" alt=\"\" class=\"wp-image-1655\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/16-864x1024.png 864w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/16-253x300.png 253w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/16-768x910.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/16.png 1230w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Now it seems pretty close to the design. We might need to make some minor changes lately to achieve a pixel-perfect implementation.<\/p>\n\n\n\n<p><strong>Let&#8217;s implement the second BarChart.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/17-1024x595.png\" alt=\"\" class=\"wp-image-1661\" width=\"524\" height=\"304\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/17-1024x595.png 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/17-300x174.png 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/17-768x446.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/17.png 1504w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/figure>\n\n\n\n<p>It looks like the previous BarChart (<code>titlesData<\/code>, <code>gridData<\/code>, <code>borderData<\/code> are the same). We only need to change the color and thickness of our Bars.<\/p>\n\n\n\n<p>Then let&#8217;s use the copy-paste power and make these changes.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">BarChartRodData makeRodData(double y) {\n  return BarChartRodData(\n      y: y,\n      colors: [\n        const Color(0xFF1726AB), \/\/ Changed!\n        const Color(0xFF364AFF), \/\/ Changed!\n      ],\n      width: 3, \/\/ Changed!\n      borderRadius: BorderRadius.circular(2),\n      backDrawRodData: BackgroundBarChartRodData(\n          show: true,\n          colors: [const Color(0xFFFCFCFC)],\n          y: 140\n      )\n  );\n}\n\n@override\nWidget build(BuildContext context) {\n  return Padding(\n    padding: const EdgeInsets.only(right: 18, top: 18, bottom: 18),\n    child: BarChart(\n      BarChartData(\n        barGroups: [\n          BarChartGroupData(x: 0, barRods: [makeRodData(20)]),\n          BarChartGroupData(x: 1, barRods: [makeRodData(40)]),\n          BarChartGroupData(x: 2, barRods: [makeRodData(30)]),\n          BarChartGroupData(x: 3, barRods: [makeRodData(60)]),\n          BarChartGroupData(x: 4, barRods: [makeRodData(75)]),\n          BarChartGroupData(x: 5, barRods: [makeRodData(35)]),\n          BarChartGroupData(x: 6, barRods: [makeRodData(42)]),\n          BarChartGroupData(x: 7, barRods: [makeRodData(33)]),\n          BarChartGroupData(x: 8, barRods: [makeRodData(60)]),\n          BarChartGroupData(x: 9, barRods: [makeRodData(90)]),\n          BarChartGroupData(x: 10, barRods: [makeRodData(86)]),\n          BarChartGroupData(x: 11, barRods: [makeRodData(120)]),\n        ],\n        titlesData: FlTitlesData(...),\n        maxY: 140,\n        gridData: FlGridData(show: false),\n        borderData: FlBorderData(show: false),\n      ),\n    ),\n  );\n}<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/18-937x1024.png\" alt=\"\" class=\"wp-image-1671\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/18-937x1024.png 937w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/18-275x300.png 275w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/18-768x839.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/18.png 1384w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Yay! We&#8217;ve implemented the new chart by only changing 3 lines of code \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. LineChart<\/h3>\n\n\n\n<p>Now we focus on the <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md\" target=\"_blank\">LineChart<\/a>. It works pretty much like <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/bar_chart.md\" target=\"_blank\">BarChart<\/a>.<br>You need to add a LineChart widget in your Flutter app. Then you need to provide a <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md#linechartdata\" target=\"_blank\">LineChartData<\/a> as a required argument.<\/p>\n\n\n\n<p><code>LineChartData <\/code>is like <code>BarChartData<\/code>. They both hold data about the representation. You can modify their properties to customize your chart.<\/p>\n\n\n\n<p>Let&#8217;s check some <code>LineChartData<\/code> properties.<\/p>\n\n\n\n<p>LineChartData has some properties just like BarChartData that we can completely reuse. <br>Like <code>titlesData<\/code>, <code>maxY<\/code>, <code>gridData<\/code> and <code>borderData<\/code> that we have used in our previous samples.<\/p>\n\n\n\n<p>Now we can use <code>lineBarsData<\/code> property to provide our showing lines. We need to provide a list of <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md#linechartbardata\" target=\"_blank\">LineChartBarData<\/a>.(each of them represents an individual line). <\/p>\n\n\n\n<p>For example in the sample that we are going to implement, there are two lines.<br>A red line and a blue line above it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/19-1024x596.png\" alt=\"\" class=\"wp-image-1681\" width=\"592\" height=\"344\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/19-1024x596.png 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/19-300x174.png 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/19-768x447.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/19-1536x893.png 1536w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/19.png 1692w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/figure>\n\n\n\n<p>In each <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md#LineChartBarData\" target=\"_blank\">LineChartBarData<\/a>, we can provide the <code>spots<\/code>, <code>colors<\/code>, <code>barWidth<\/code>, <code>isCurved<\/code>, &#8230;. properties. <\/p>\n\n\n\n<p>To get started, let&#8217;s plot our first line (the blue one):<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">LineChart(\n  LineChartData(\n    lineBarsData: [\n      LineChartBarData(\n        spots: const [\n          FlSpot(0, 24),\n          FlSpot(1, 24),\n          FlSpot(2, 40),\n          FlSpot(3, 84),\n          FlSpot(4, 100),\n          FlSpot(5, 80),\n          FlSpot(6, 64),\n          FlSpot(7, 86),\n          FlSpot(8, 108),\n          FlSpot(9, 105),\n          FlSpot(10, 105),\n          FlSpot(11, 124),\n        ],\n      )\n    ],\n    titlesData: FlTitlesData(...),\n    maxY: 140,\n    gridData: FlGridData(show: false),\n    borderData: FlBorderData(show: false),\n  ),\n),<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/20-945x1024.png\" alt=\"\" class=\"wp-image-1688\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/20-945x1024.png 945w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/20-277x300.png 277w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/20-768x833.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/20.png 1356w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Not bad for the first try. But let&#8217;s improve it.<\/p>\n\n\n\n<p>We used <code>FlSpot(x, y)<\/code> to plot our line chart (I have chosen the values with my eyes, they are not exactly like the design)<\/p>\n\n\n\n<p>As you see left titles started from <code>24<\/code>. That&#8217;s because we didn&#8217;t provide any <code>minY<\/code> value and it finds the minimum y value from your provided data.<br>To solve this issue, we need to provide <code>minY: 0<\/code> in our LineChartData.<\/p>\n\n\n\n<p>We also need to remove those circular points in the line.<br>To customize them we should modify <code>dotData<\/code> property of our <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md#LineChartBarData\" target=\"_blank\">LineChartBarData<\/a>.<\/p>\n\n\n\n<p>Let&#8217;s change the line&#8217;s color too (using <code>colors<\/code> property).<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">LineChart(\n  LineChartData(\n    lineBarsData: [\n      LineChartBarData(\n        spots: const [\n          FlSpot(0, 24),\n          FlSpot(1, 24),\n          FlSpot(2, 40),\n          FlSpot(3, 84),\n          FlSpot(4, 100),\n          FlSpot(5, 80),\n          FlSpot(6, 64),\n          FlSpot(7, 86),\n          FlSpot(8, 108),\n          FlSpot(9, 105),\n          FlSpot(10, 105),\n          FlSpot(11, 124),\n        ],\n        dotData: FlDotData(show: false),\n        colors: const [Color(0xFFFF26B5), Color(0xFFFF5B5B)])\n      )\n    ],\n    titlesData: FlTitlesData(\n      rightTitles: SideTitles(showTitles: false),\n      topTitles: SideTitles(showTitles: false),\n      bottomTitles: SideTitles(\n        reservedSize: 6,\n        showTitles: true,\n        getTitles: (xValue) {\n          switch (xValue.toInt()) {\n            case 0:\n              return 'Jan';\n            case 1:\n              return 'Feb';\n            case 2:\n              return 'Mar';\n            case 3:\n              return 'Apr';\n            case 4:\n              return 'May';\n            case 5:\n              return 'Jun';\n            case 6:\n              return 'Jul';\n            case 7:\n              return 'Aug';\n            case 8:\n              return 'Sep';\n            case 9:\n              return 'Oct';\n            case 10:\n              return 'Nov';\n            case 11:\n              return 'Dec';\n            default:\n              throw StateError('Not supported');\n          }\n        },\n      ),\n      leftTitles: SideTitles(\n        showTitles: true,\n        interval: 20,\n        reservedSize: 32,\n      ),\n    ),\n    maxY: 140,\n    minY: 0,\n    gridData: FlGridData(show: false),\n    borderData: FlBorderData(show: false),\n  ),\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/22-939x1024.png\" alt=\"\" class=\"wp-image-1703\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/22-939x1024.png 939w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/22-275x300.png 275w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/22-768x837.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/22.png 1378w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Nice! <\/p>\n\n\n\n<p>Note that we provided a list of colors to paint a gradient over our line. If you want to paint a solid color, you only need to provide one color.<\/p>\n\n\n\n<p>At this point, I&#8217;m going to introduce a magic parameter. It&#8217;s <code>isCurved: true<\/code>.<br>It curves the line through the provided points.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">child: LineChart(\n  LineChartData(\n    lineBarsData: [\n      LineChartBarData(\n        spots: const [ ... ],\n        dotData: FlDotData(show: false),\n        colors: const [Color(0xFFFF26B5), Color(0xFFFF5B5B)],\n        isCurved: true,\n      )\n    ],\n    titlesData: FlTitlesData(...),\n    maxY: 140,\n    minY: 0,\n    gridData: FlGridData(show: false),\n    borderData: FlBorderData(show: false),\n  ),\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/23-931x1024.png\" alt=\"\" class=\"wp-image-1709\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/23-931x1024.png 931w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/23-273x300.png 273w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/23-768x844.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/23.png 1388w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>There is also a <code>curveSmoothness<\/code> property that you can change the smoothness (<code>0<\/code> is hard-edge and <code>0.35<\/code> is the default value).<\/p>\n\n\n\n<p>As you see in the design, there is a highlight area at the bottom of our line. <br>Let&#8217;s implement it.<\/p>\n\n\n\n<p>Each <code>LineChartBarData<\/code> has a <code>belowBarData<\/code> and <code>aboveBarData<\/code> properties which you can use them to customize the area above or below of the line.<\/p>\n\n\n\n<p>Let&#8217;s customize <code>belowBarData<\/code> in our sample:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">LineChartBarData(\n  spots: const [\n    FlSpot(0, 24),\n    FlSpot(1, 24),\n    FlSpot(2, 40),\n    FlSpot(3, 84),\n    FlSpot(4, 100),\n    FlSpot(5, 80),\n    FlSpot(6, 64),\n    FlSpot(7, 86),\n    FlSpot(8, 108),\n    FlSpot(9, 105),\n    FlSpot(10, 105),\n    FlSpot(11, 124),\n  ],\n  dotData: FlDotData(show: false),\n  colors: const [Color(0xFFFF26B5), Color(0xFFFF5B5B)],\n  isCurved: true,\n  belowBarData: BarAreaData(\n    show: true,\n  ),\n)\n<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1380\" height=\"1514\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/24-933x1024.png\" alt=\"\" class=\"wp-image-1714\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/24-933x1024.png 933w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/24-273x300.png 273w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/24-768x843.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/24.png 1380w\" sizes=\"auto, (max-width: 1380px) 100vw, 1380px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>As you see we only set <code>show: true<\/code>. It showed with a pre-defined values. <\/p>\n\n\n\n<p>There is a <code>colors<\/code> property inside <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/blob\/master\/repo_files\/documentations\/line_chart.md#BarAreaData\" target=\"_blank\">BarAreaData<\/a> which you can use to customize the color.<br>If you pass one color, it paints a solid color, otherwise, it paints a gradient through your provided colors.<br>There is also <code>gradientFrom<\/code>, <code>gradientTo<\/code>, <code>gradientColorStops<\/code> properties which you can customize the gradient:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">LineChartBarData(\n  spots: const [\n    FlSpot(0, 24),\n    FlSpot(1, 24),\n    FlSpot(2, 40),\n    FlSpot(3, 84),\n    FlSpot(4, 100),\n    FlSpot(5, 80),\n    FlSpot(6, 64),\n    FlSpot(7, 86),\n    FlSpot(8, 108),\n    FlSpot(9, 105),\n    FlSpot(10, 105),\n    FlSpot(11, 124),\n  ],\n  dotData: FlDotData(show: false),\n  colors: const [Color(0xFFFF26B5), Color(0xFFFF5B5B)],\n  isCurved: true,\n  belowBarData: BarAreaData(\n    show: true,\n    colors: const [Color(0x10FF26B5), Color(0x00FF26B5)],\n    gradientFrom: const Offset(0.5, 0),\n    gradientTo: const Offset(0.5, 1),\n  ),\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"935\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/25-935x1024.png\" alt=\"\" class=\"wp-image-1717\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/25-935x1024.png 935w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/25-274x300.png 274w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/25-768x841.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/25.png 1388w\" sizes=\"auto, (max-width: 935px) 100vw, 935px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>It seems fantastic \ud83e\udd29 doesn&#8217;t it?<\/p>\n\n\n\n<p>Now let&#8217;s add another <code>LineChartBarData<\/code> for the blue line. <\/p>\n\n\n\n<p>Of course, we are going to duplicate it \ud83d\ude42<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">child: LineChart(\n  LineChartData(\n    lineBarsData: [\n      LineChartBarData(...),\n      LineChartBarData(\n        spots: const [\n          FlSpot(0, 40),\n          FlSpot(1, 28),\n          FlSpot(2, 20),\n          FlSpot(3, 18),\n          FlSpot(4, 40),\n          FlSpot(5, 92),\n          FlSpot(6, 88),\n          FlSpot(7, 70),\n          FlSpot(8, 85),\n          FlSpot(9, 102),\n          FlSpot(10, 80),\n          FlSpot(11, 80),\n        ],\n        dotData: FlDotData(show: false),\n        colors: const [Color(0xFF268AFF), Color(0xFF905BFF)],\n        isCurved: true,\n        belowBarData: BarAreaData(\n          show: true,\n          colors: const [Color(0x1f268AFF), Color(0x00268AFF)],\n          gradientFrom: const Offset(0.5, 0),\n          gradientTo: const Offset(0.5, 1),\n        ),\n      ),\n    ],\n    titlesData: FlTitlesData(...),\n    maxY: 140,\n    minY: 0,\n    gridData: FlGridData(show: false),\n    borderData: FlBorderData(show: false),\n  ),\n),<\/pre>\n\n\n\n<p><strong>Great! It&#8217;s time to implement the last line chart.<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26-851x1024.png\" alt=\"\" class=\"wp-image-1724\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26-851x1024.png 851w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26-249x300.png 249w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26-768x925.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26-180x217.png 180w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26-267x322.png 267w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/26.png 1256w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/27-1024x595.png\" alt=\"\" class=\"wp-image-1729\" width=\"492\" height=\"286\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/27-1024x595.png 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/27-300x174.png 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/27-768x446.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/27-1536x893.png 1536w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/27.png 1648w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/figure>\n\n\n\n<p>It&#8217;s pretty simple. We need something like the previous chart with <code>isCurved: false<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">child: LineChart(\n  LineChartData(\n    lineBarsData: [\n      LineChartBarData(\n        spots: const [ ... ],\n        dotData: FlDotData(show: false),\n        colors: const [Color(0xFFFF26B5), Color(0xFFFF5B5B)],\n        isCurved: false,\n        belowBarData: BarAreaData(\n          show: true,\n          colors: const [Color(0x10FF26B5), Color(0x00FF26B5)],\n          gradientFrom: const Offset(0.5, 0),\n          gradientTo: const Offset(0.5, 1),\n        ),\n      ),\n      LineChartBarData(\n        spots: const [ ... ],\n        dotData: FlDotData(show: false),\n        colors: const [Color(0xFF905BFF), Color(0xFF268AFF)],\n        isCurved: false,\n        belowBarData: BarAreaData(\n          show: true,\n          colors: const [Color(0x1f268AFF), Color(0x00268AFF)],\n          gradientFrom: const Offset(0.5, 0),\n          gradientTo: const Offset(0.5, 1),\n        ),\n      ),\n    ],\n    titlesData: FlTitlesData(...),\n    maxY: 140,\n    minY: 0,\n    gridData: FlGridData(show: false),\n    borderData: FlBorderData(show: false),\n  ),\n)<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"845\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28-845x1024.png\" alt=\"\" class=\"wp-image-1734\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28-845x1024.png 845w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28-248x300.png 248w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28-768x931.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28-180x217.png 180w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28-368x445.png 368w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/28.png 1256w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Congratulations \ud83e\udd73<br>We Implemented all charts.<\/p>\n\n\n\n<p>Now let&#8217;s put them in the boxes that we have made using GridView:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class HomePage extends StatelessWidget {\n  const HomePage({Key? key}) : super(key: key);\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: const Color(0xFFE5E5E5),\n      body: LayoutBuilder(\n          builder: (context, constraints) {\n            return GridView.count(\n              crossAxisCount: constraints.maxWidth &lt; 800 ? 1 : 2,\n              childAspectRatio: 1.7,\n              padding: const EdgeInsets.all(16),\n              crossAxisSpacing: 16,\n              mainAxisSpacing: 16,\n              children: const [\n                Card(child: BarChartWidget1()),\n                Card(child: BarChartWidget2()),\n                Card(child: LineChartWidget1()),\n                Card(child: LineChartWidget2()),\n              ],\n            );\n          }\n      ),\n    );\n  }\n}<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Now we need to implement the top section of the charts (contains the legends).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Legends (top section)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-17-at-22.25.10-1024x102.png\" alt=\"\" class=\"wp-image-1744\" width=\"474\" height=\"46\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-17-at-22.25.10-1024x102.png 1024w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-17-at-22.25.10-300x30.png 300w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-17-at-22.25.10-768x76.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-17-at-22.25.10-1536x153.png 1536w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-17-at-22.25.10.png 1710w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/figure>\n\n\n\n<p>To implement this, we need to use a <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Row-class.html\" target=\"_blank\">Row<\/a> widget to layout our widgets horizontally.<\/p>\n\n\n\n<p>They don&#8217;t have any functionality at this time.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class TopSectionWidget extends StatelessWidget {\n  final String title;\n  final List&lt;Legend> legends;\n  final EdgeInsets padding;\n\n  const TopSectionWidget({\n    Key? key,\n    required this.title,\n    required this.legends,\n    this.padding = EdgeInsets.zero,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      height: 20,\n      margin: padding,\n      child: Row(\n        children: [\n          Text(title, style: const TextStyle(color: Color(0xFF040420), fontWeight: FontWeight.bold, fontSize: 12)),\n          Expanded(child: Container(), flex: 5),\n          ...legends\n              .map(\n                (e) => Row(\n                  children: [\n                    _LegendWidget(legend: e),\n                    const SizedBox(width: 12)\n                  ],\n                ),\n              )\n              .toList(),\n          Expanded(child: Container(), flex: 1),\n          const Text('2019', style: TextStyle(color: Color(0xFFA7A7B7))),\n        ],\n      ),\n    );\n  }\n}\n\nclass _LegendWidget extends StatelessWidget {\n  final Legend legend;\n\n  const _LegendWidget({\n    Key? key,\n    required this.legend,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Row(\n      children: [\n        Container(\n          width: 12,\n          height: 12,\n          decoration: BoxDecoration(\n            color: legend.color,\n            borderRadius: const BorderRadius.all(Radius.circular(4)),\n          ),\n        ),\n        const SizedBox(width: 4),\n        Text(legend.title, style: const TextStyle(color: Color(0xFFA7A7B7))),\n      ],\n    );\n  }\n}\n\nclass Legend {\n  final String title;\n  final Color color;\n\n  Legend({\n    required this.title,\n    required this.color,\n  });\n}<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"971\" height=\"1024\" src=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/33-971x1024.png\" alt=\"\" class=\"wp-image-1758\" srcset=\"https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/33-971x1024.png 971w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/33-285x300.png 285w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/33-768x810.png 768w, https:\/\/flutter4fun.com\/wp-content\/uploads\/2021\/11\/33.png 1360w\" sizes=\"auto, (max-width: 971px) 100vw, 971px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">6. Switch between dartk\/light themes<\/h3>\n\n\n\n<p>As an advanced topic, Let&#8217;s implement dart\/light temes with a <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/material\/Switch-class.html\" target=\"_blank\">Switch<\/a> button.<\/p>\n\n\n\n<p>You can read <a rel=\"noreferrer noopener\" href=\"https:\/\/itnext.io\/an-easy-way-to-switch-between-dark-and-light-theme-in-flutter-fb971155eefe\" target=\"_blank\">this article<\/a> to understand how to switch between themes.<br>There is also an article about providers written by the Flutter team <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.flutter.dev\/development\/data-and-backend\/state-mgmt\/simple\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p>We use <code>ChangeNotifier<\/code> and <meta charset=\"utf-8\"><a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/provider\" target=\"_blank\">provider<\/a> package to implement it.<\/p>\n\n\n\n<p><code>fl_chart<\/code> widgets are theme-aware. It means chart titles color, borders color, grid line colors,&#8230; change based on your current theme. <\/p>\n\n\n\n<p>We are not going to explain how to switch between themes. Because it is not our main focus in this article.<br>BTW it&#8217;s simple, we provide a <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.flutter.dev\/development\/data-and-backend\/state-mgmt\/simple#changenotifier\" target=\"_blank\">ChangeNotifier<\/a> called <code>MyThemeModel<\/code> at top of the tree (above the <a rel=\"noreferrer noopener\" href=\"https:\/\/api.flutter.dev\/flutter\/material\/MaterialApp-class.html\" target=\"_blank\">MaterialApp<\/a>). Then we use the <a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/documentation\/provider\/latest\/provider\/Consumer-class.html\" target=\"_blank\">Consumer<\/a> widget of the <a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/provider\" target=\"_blank\">provider<\/a> package to rebuild our widget tree when the value (theme) is changed.<\/p>\n\n\n\n<p>Then you can update your styles based on the current theme.<\/p>\n\n\n\n<p>We can have access to the <code>MyThemeModel<\/code> using <code>Provider.of(context, listen: false)<\/code> and we call it&#8217;s <code>switchTheme()<\/code> when we want to change the theme.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class MyThemeModel extends ChangeNotifier {\n  bool _isDark = false;\n\n  ThemeMode currentTheme() {\n    return _isDark ? ThemeMode.dark : ThemeMode.light;\n  }\n\n  bool isDark() {\n    return currentTheme() == ThemeMode.dark;\n  }\n\n  void switchTheme() {\n    _isDark = !_isDark;\n    notifyListeners();\n  }\n}\n\nvoid main() {\n  \/\/ We provide it once at top of the tree\n  runApp(\n    ChangeNotifierProvider(\n      create: (context) => MyThemeModel(),\n      child: const MyApp(),\n    ),\n  );\n}<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    \/\/ We use it everywhere to update our widget three\n    return Consumer&lt;MyThemeModel>(\n      builder: (context, themeModel, child) {\n        return MaterialApp(\n          title: 'Flutter4fun',\n          debugShowCheckedModeBanner: false,\n          theme: ThemeData.light(),\n          darkTheme: ThemeData.dark(),\n          themeMode: themeModel.currentTheme(),\n          home: const HomePage(),\n        );\n      },\n    );\n  }\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/G7Igah-2uq0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>Thanks for reading this long article. Please let me know is it annoying to read this kind of long post or not? If it is annoying I can split them into a series of blog posts. (Like what we did in <a rel=\"noreferrer noopener\" href=\"https:\/\/flutter4fun.com\/ui-challenge-2-game-app-design-by-nevil-suresh\/\" target=\"_blank\">UI Challenge 2<\/a>).<\/p>\n\n\n\n<p>I built it using <a href=\"https:\/\/flutter.dev\/multi-platform\/web\" target=\"_blank\" rel=\"noreferrer noopener\">flutter web<\/a>. Now you can try it out in your browser <a rel=\"noreferrer noopener\" href=\"https:\/\/flutter4fun.github.io\/UI-Challenge-7-Live\/#\/\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p>Also, the source code is available <a href=\"https:\/\/github.com\/Flutter4Fun\/UI-Challenge-7\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Buy me a coffe<\/h3>\n\n\n\n<p>If you like the <a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/fl_chart\" target=\"_blank\">fl_chart<\/a> package, you can <a rel=\"noreferrer noopener\" href=\"https:\/\/www.buymeacoffee.com\/fl_chart\" data-type=\"URL\" data-id=\"https:\/\/www.buymeacoffee.com\/fl_chart\" target=\"_blank\">buy me a coffee<\/a> to motivate me to work more on it \ud83d\ude1d<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><a href=\"https:\/\/www.buymeacoffee.com\/fl_chart\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/github.com\/imaNNeoFighT\/fl_chart\/raw\/master\/repo_files\/images\/buy_me_a_coffee.jpeg\" alt=\"\" width=\"530\" height=\"265\"\/><\/a><\/figure>\n\n\n\n<p>Don&#8217;t forget to subscribe and write your feedback below.<\/p>\n\n\n\n<p>Stay safe!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi guys. Happy to write again! Today I found this fantastic design from Rayhanul Islam (check it in the Uplabs). In this article, we are going to implement and explain it step by step. This session is special because we are going to cover these aspects: Implement it in responsive way (to support all screens [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1523,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"wp_social_preview_title":"","wp_social_preview_description":"","wp_social_preview_image":0,"footnotes":""},"categories":[33,32],"tags":[],"class_list":["post-1520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fl-chart","category-ui-challenge"],"_links":{"self":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts\/1520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/comments?post=1520"}],"version-history":[{"count":202,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts\/1520\/revisions"}],"predecessor-version":[{"id":1917,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/posts\/1520\/revisions\/1917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/media\/1523"}],"wp:attachment":[{"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/media?parent=1520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/categories?post=1520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flutter4fun.com\/wp-json\/wp\/v2\/tags?post=1520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}