How to Visualizing Data in Flutter Using fl_chart

by | Oct 4, 2024 | Mobile App Development

Flutter

Visualize Data in Flutter with fl_chart

Introduction

In modern app development, visualizing data plays a significant role in enhancing user experience. Whether it’s for analytics, performance tracking, or comparison, charts make complex data easy to understand. If you’re working with Flutter, the fl_chart package is a powerful tool to create beautiful and interactive charts.
In this blog, we’ll dive into the fl_chart package, cover how to integrate it into your Flutter application, and demonstrate how it can help elevate your app’s UI with different types of charts like Line, Bar, Pie, and more.

​

Why Use fl_chart?

fl_chart is a flexible, feature-rich library that allows you to create multiple types of charts effortlessly. Some reasons to use it in your Flutter app include:
  • Ease of Use: You can create complex charts with simple code.
  • Customization: Adjust colors, labels, gridlines, and more to match your app’s theme.
  • Performance: It’s optimized for mobile platforms, ensuring smooth performance.
  • Chart Variety: Supports a wide range of chart types like Line, Bar, Pie, Scatter, and Radar.

1. Getting Started with fl_chart

Step 1: Add the Dependency
To get started with fl_chart, add it to your pubspec.yaml file:

yaml


dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.0  # Check pub.dev for the latest version

Run flutter pub get to install the package.

Step 2: Import the Package
In the desired Dart file, import the fl_chart package:

dart


import 'package:fl_chart/fl_chart.dart'

2. Line Chart: Tracking Data Trends

A Line Chart is ideal for tracking changes over time or trends in data. Let’s create a simple line chart to display the progress of a task.

Code Example

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

class LineChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line Chart Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LineChart(
          LineChartData(
            gridData: FlGridData(show: true),
            titlesData: FlTitlesData(show: true),
            borderData: FlBorderData(show: true),
            lineBarsData: [
              LineChartBarData(
                spots: [
                  FlSpot(0, 1),
                  FlSpot(1, 1.5),
                  FlSpot(2, 2),
                  FlSpot(3, 2.5),
                  FlSpot(4, 3),
                ],
                isCurved: true,
                colors: [Colors.blue],
                barWidth: 4,
                belowBarData: BarAreaData(show: true, colors: [
                  Colors.blue.withOpacity(0.3),
                ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
  • FlSpot: Points on the graph with X and Y coordinates.
  • LineChartBarData: Configures the appearance of the line, including color, curve, and shading below the line.
  • Customization: You can adjust the grid, borders, and labels to match your theme.
Output: Line Chart
Imagine a smooth, animated line tracking progress across several data points with subtle shading below the line.

3. Bar Chart: Comparing Data Categories

Bar charts are perfect for comparing data across categories. For example, you can use them to display monthly sales data, app performance metrics, or user growth.

Code Example

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

class BarChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bar Chart Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BarChart(
          BarChartData(
            barGroups: [
              BarChartGroupData(
                x: 0,
                barRods: [BarChartRodData(y: 8, colors: [Colors.red])],
              ),
              BarChartGroupData(
                x: 1,
                barRods: [BarChartRodData(y: 10, colors: [Colors.blue])],
              ),
              BarChartGroupData(
                x: 2,
                barRods: [BarChartRodData(y: 14, colors: [Colors.green])],
              ),
            ],
            borderData: FlBorderData(show: false),
            titlesData: FlTitlesData(
              bottomTitles: SideTitles(showTitles: true),
              leftTitles: SideTitles(showTitles: true),
            ),
          ),
        ),
      ),
    );
  }
}
Explanation
  • BarChartGroupData: Each group represents a bar in the chart.
  • BarChartRodData: Specifies each bar’s height and color.
Output: Bar Chart
This chart clearly compares values with different colored bars, making it easier to visualize category-based data.

4. Pie Chart: Visualizing Proportions

Pie Charts are used to display proportions of a whole, such as market share, app usage, or survey results.

Code Example

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

class PieChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pie Chart Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: PieChart(
          PieChartData(
            sections: [
              PieChartSectionData(
                color: Colors.blue,
                value: 40,
                title: '40%',
                radius: 50,
              ),
              PieChartSectionData(
                color: Colors.red,
                value: 30,
                title: '30%',
                radius: 50,
              ),
              PieChartSectionData(
                color: Colors.green,
                value: 20,
                title: '20%',
                radius: 50,
              ),
              PieChartSectionData(
                color: Colors.yellow,
                value: 10,
                title: '10%',
                radius: 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Explanation
  • PieChartSectionData: Defines each slice of the pie, with the percentage, color, and radius.
  • Customization: You can add labels, adjust the size of the pie, and even animate it.
Output: Pie Chart
This creates a colorful, clean pie chart displaying percentages with easy-to-read labels.

5. Scatter Chart: Plotting Data Points

Scatter Charts are useful when you need to display data points without connecting them via lines, such as visualizing a distribution or relationship between two variables.
Code Example

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

class ScatterChartExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scatter Chart Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ScatterChart(
          ScatterChartData(
            scatterSpots: [
              ScatterSpot(1, 1, color: Colors.red, radius: 6),
              ScatterSpot(2, 3, color: Colors.blue, radius: 8),
              ScatterSpot(3, 5, color: Colors.green, radius: 10),
            ],
            titlesData: FlTitlesData(show: true),
          ),
        ),
      ),
    );
  }
}
Explanation
  • ScatterSpot: Represents individual points on the chart.
  • Customization: You can define the radius and color of each point to represent different attributes.
Output: Scatter Chart
A minimalistic chart plotting different points based on your data, perfect for scatterplots or bubble charts.

How fl_chart Helps Your Application

By incorporating charts into your application, you offer users an enhanced way to understand data. Whether it’s tracking app usage, visualizing performance metrics, or comparing datasets, fl_chart makes data presentation seamless.
  • Improved User Experience: Visual data is much easier to grasp than raw numbers.
  • Customization: You can adapt charts to fit your brand’s theme and make the data presentation consistent with your UI design.
  • Interactivity: You can add animations, tooltips, and interactivity to make the charts more engaging.

Conclusion

The fl_chart package is an excellent tool for adding rich data visualizations to your Flutter applications. Whether you need Line, Bar, Pie, or Scatter charts, fl_chart offers a wide array of customizable options to present your data effectively. With just a few lines of code, you can transform how users interact with and understand data in your app.
Get started today by incorporating fl_chart into your next Flutter project and watch how it enhances both user engagement and the overall design of your app.