Creating Interactive Charts in Flutter Using charts_flutter

Introduction:

In this tutorial, we will explore how to create interactive and visually appealing charts in Flutter using the charts_flutter library. Charts are an essential component of many applications, providing insights into data and enhancing user experience. We'll cover various types of charts such as line charts, bar charts, and pie charts with step-by-step examples.

Prerequisites:

• Basic knowledge of Flutter and Dart programming
• Flutter development environment set up

Installation:

To get started, add the charts_flutter dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  charts_flutter: ^0.11.0 # Check for the latest version on pub.dev 

Run flutter pub get to fetch the package.

Creating Line Chart:

Let's start by creating a simple line chart.

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Line Chart Example',
      home: LineChartSample(),
    );
  }
}


class LineChartSample extends StatelessWidget {
  final List<charts.Series<LinearSales, int>> seriesList = [
    charts.Series<LinearSales, int>(
      id: 'Sales',
      colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
      domainFn: (LinearSales sales, _) => sales.year,
      measureFn: (LinearSales sales, _) => sales.sales,
      data: [
        LinearSales(0, 5),
        LinearSales(1, 25),
        LinearSales(2, 100),
        LinearSales(3, 75),
      ],
    ),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line Chart Example')),
      body: Center(
        child: charts.LineChart(
          seriesList,
          animate: true,
          defaultRenderer: charts.LineRendererConfig(includeArea: true, stacked: true),
        ),
      ),
    );
  }
}


class LinearSales {
  final int year;
  final int sales;


  LinearSales(this.year, this.sales);
} 

In this example, we define a LineChartSample widget that holds our line chart. We use the charts.Series class to create data series and specify the mapping functions for the X and Y axes. The charts.LineChart widget displays the chart on the screen.

Creating Bar Chart:

Next, let's create a bar chart example.

// Import statements and MyApp class definition remain the same


class BarChartSample extends StatelessWidget {
  final List<charts.Series<OrdinalSales, String>> seriesList = [
    charts.Series<OrdinalSales, String>(
      id: 'Sales',
      colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
      domainFn: (OrdinalSales sales, _) => sales.year,
      measureFn: (OrdinalSales sales, _) => sales.sales,
      data: [
        OrdinalSales('2017', 15),
        OrdinalSales('2018', 25),
        OrdinalSales('2019', 50),
        OrdinalSales('2020', 80),
      ],
    ),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bar Chart Example')),
      body: Center(
        child: charts.BarChart(
          seriesList,
          animate: true,
          vertical: false,
        ),
      ),
    );
  }
}


class OrdinalSales {
  final String year;
  final int sales;


  OrdinalSales(this.year, this.sales);
}

Here, we define a BarChartSample widget that holds our bar chart. We use the charts.BarChart widget to display the chart horizontally, and the data is represented using the OrdinalSales class.

Conclusion:

In this tutorial, we explored how to create interactive charts in Flutter using the charts_flutter library. We covered line charts, bar charts, and pie charts with detailed examples. By customizing data series and renderer configurations, you can create visually appealing and informative charts for your Flutter applications.