Flutter charts tutorial for beginners

 

Flutter Charts :

Flutter charts is used to represent the data in graphical way so that user can easily understand it.We can plot a graph with the data to show the raise and fall of the values representing the data.

Charts are provided to make data easily understand as they are easy to read the data and know the performance on yearly bases based on year.

The main advantage of flutter charts is used to make you understand the large amount’s of data easily through graphical representation.

There are different types of charts we will see in this tutorial we will deal with the linear charts.

Apps like google analytics, youtube console depicts these charts to show the visitors count and so on other services through these graphs.

 

Flutter Charts Video Tutorial :

Go through the below tutorial for more detailed information.

 

Project Structure :

This image below depicts the project structure of flutter charts.

flutter charts

 

pubspec.yaml :

Add the dependency fl_chart and specify the version according to the latest available to avoid code level issues.

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.10.1

 

main.dart :

Initialize with void main() and consider a default class MyApp()

void main() {
  runApp(MyApp());
}

 

Return material app and consider home

MaterialApp(
  home: Home(),
);

 

Declare a app bar and provide the title.

AppBar(
  title: Text("Line Charts"),
),

 

Declare the charts here we are considering LineCharts() for now.

LineCharts(),

 

LineCharts.dart :

In this file we will declare our flutter charts so that we can use it through the project just by passing values to it.

 

Define the spots to be plotted on the chart

spots: [
  FlSpot(0, 0),
  FlSpot(1, 1),
  FlSpot(2, 3),
  FlSpot(3, 3),
  FlSpot(4, 5),
  FlSpot(4, 4)
],

 

If curve required then provide it through boolean variables

isCurved: false,

 

provide the bar width

barWidth: 1,

 

color is specified for the curve

colors: [
  Colors.black,
],

 

below bar data

belowBarData: BarAreaData(
  show: true,
  colors: [Colors.lightGreen.withOpacity(0.4)],
  cutOffY: cutOffYValue,
  applyCutOffY: true,
),

 

above bar data

aboveBarData: BarAreaData(
  show: true,
  colors: [Colors.red.withOpacity(0.6)],
  cutOffY: cutOffYValue,
  applyCutOffY: true,
),

 

Declare the years i.e., cases to be plotted on the chart based on switch condition.

switch (value.toInt()) {
  case 0:
    return '2015';
  case 1:
    return '2016';
  case 2:
    return '2017';
  case 3:
    return '2018';
  case 4:
    return '2019';
  default:
    return '';
}

 

provide the left titles here we are providing numbers starting from 20

leftTitles: SideTitles(
  showTitles: true,
  getTitles: (value) {
    return '\$ ${value + 20}';
  },
),

 

FullCode :

Providing the full code for flutter charts integration in your app.

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineCharts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const cutOffYValue = 0.0;
    const yearTextStyle =
    TextStyle(fontSize: 10, color: Colors.black, fontWeight: FontWeight.bold);

    return SizedBox(
      width: 330,
      height: 180,
      child: LineChart(
        LineChartData(
          lineTouchData: LineTouchData(enabled: false),
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, 0),
                FlSpot(1, 1),
                FlSpot(2, 3),
                FlSpot(3, 3),
                FlSpot(4, 5),
                FlSpot(4, 4)
              ],
              isCurved: false,
              barWidth: 1,
              colors: [
                Colors.black,
              ],
              belowBarData: BarAreaData(
                show: true,
                colors: [Colors.lightGreen.withOpacity(0.4)],
                cutOffY: cutOffYValue,
                applyCutOffY: true,
              ),
              aboveBarData: BarAreaData(
                show: true,
                colors: [Colors.red.withOpacity(0.6)],
                cutOffY: cutOffYValue,
                applyCutOffY: true,
              ),
              dotData: FlDotData(
                show: false,
              ),
            ),
          ],
          minY: 0,
          titlesData: FlTitlesData(
            bottomTitles: SideTitles(
                showTitles: true,
                reservedSize: 6,
                textStyle: yearTextStyle,
                getTitles: (value) {
                  switch (value.toInt()) {
                    case 0:
                      return '2015';
                    case 1:
                      return '2016';
                    case 2:
                      return '2017';
                    case 3:
                      return '2018';
                    case 4:
                      return '2019';
                    default:
                      return '';
                  }
                }),
            leftTitles: SideTitles(
              showTitles: true,
              getTitles: (value) {
                return '\$ ${value + 20}';
              },
            ),
          ),
          axisTitleData: FlAxisTitleData(
              leftTitle: AxisTitle(showTitle: true, titleText: 'Value', margin: 10),
              bottomTitle: AxisTitle(
                  showTitle: true,
                  margin: 10,
                  titleText: 'Year',
                  textStyle: yearTextStyle,
                  textAlign: TextAlign.right)),
          gridData: FlGridData(
            show: true,
            checkToShowHorizontalLine: (double value) {
              return value == 1 || value == 2 || value == 3 || value == 4;
            },
          ),
        ),
      ),
    );
  }
}

 

Flutter charts output :

This screen below depicts the usage of flutter charts

flutter charts

 

 

Show Buttons
Hide Buttons