How to Visualize Data in Flutter with fl_chart and Back4App

24min
Introduction
Data visualization is a crucial aspect of modern applications, helping users understand complex data through intuitive graphs and charts. In this tutorial, you will learn how to create interactive and visually appealing charts in your Flutter application using the fl_chart package. Additionally, you will integrate Back4App—a backend-as-a-service (BaaS) platform powered by Parse Server—to store and retrieve data for your charts. By the end of this tutorial, you will have a fully functional Flutter app that displays dynamic data fetched from Back4App using various chart types like line, bar, and pie charts.
Prerequisites
To complete this tutorial, you will need:
A Back4App account. If you don't have one, you can sign up for a free account at Back4App.
Flutter SDK installed on your local machine. You can follow the official Flutter installation guide for your operating system.
Basic knowledge of Dart and Flutter. If you are new to Flutter, consider reviewing the Flutter documentation to familiarize yourself with the basics.
Parse Server SDK for Flutter added to your project. You can learn how to set it up by following the Back4App Flutter SDK Guide.
An IDE or text editor such as Visual Studio Code or Android Studio.
Step 1 – Setting Up the Back4App Backend
In this step, you will create a new Back4App application and set up a data class to store your chart data.
1.1. Create a New Back4App Application
Log in to your Back4App dashboard.
Click on "Create new App".
Enter a name for your application, e.g., "FlutterChartApp", and click "Create".
1.2. Set Up the Data Model
In your application dashboard, navigate to the "Database" section in the left sidebar.
Click on "Create a class" at the top of the page.
In the modal that appears:
Select "Custom".
Enter "SalesData" as the class name.
Click "Create class".
1.3. Add Columns to the Class
In the "SalesData" class, click on "+" to add a new column.
Add the following columns:
month: Type String
sales: Type Number
Your data model is now set up to store monthly sales data, which you will visualize in your Flutter app.
Step 2 – Populating the Database with Sample Data
Before fetching data in your app, you need some sample data in your Back4App database.
Still in the "SalesData" class, click on "+" to add a new row.
Enter the following sample data:
Repeat the above steps to add all the sample data entries.
Step 3 – Setting Up the Flutter Project
In this step, you will create a new Flutter project and add the necessary dependencies.
3.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Navigate to the project directory:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Add Dependencies to pubspec.yaml
Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
﻿
Run flutter pub get to install the packages.
Step 4 – Initializing Parse in Your Flutter App
To connect your Flutter app with Back4App, you need to initialize the Parse SDK.
4.1. Obtain Back4App Application Credentials
In your Back4App dashboard, navigate to "App Settings" > "Security & Keys".
Note down your Application ID and Client Key.
4.2. Initialize Parse in main.dart
Open lib/main.dart and modify it as follows:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file in the next step

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file in the next step

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
Replace 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with the credentials you obtained from Back4App.
Step 5 – Fetching Data from Back4App
In this step, you will fetch the sales data from Back4App using the Parse SDK.
5.1. Create home_page.dart
Create a new file lib/home_page.dart and add the following code:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:fl_chart/fl_chart.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class SalesData {
  final String month;
  final double sales;

  SalesData(this.month, this.sales);
}

class _HomePageState extends State<HomePage> {
  List<SalesData> chartData = [];

  @override
  void initState() {
    super.initState();
    fetchSalesData();
  }

  Future<void> fetchSalesData() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('SalesData'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        chartData = apiResponse.results!.map((data) {
          final month = data.get<String>('month') ?? '';
          final sales = data.get<num>('sales')?.toDouble() ?? 0.0;
          return SalesData(month, sales);
        }).toList();
      });
    } else {
      // Handle errors
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sales Chart'),
        ),
        body: chartData.isEmpty
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: LineChart(
                  LineChartData(
                    minY: 0,
                    maxY: 250,
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(showTitles: true),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: true,
                          getTitlesWidget: bottomTitleWidgets,
                          interval: 1,
                        ),
                      ),
                    ),
                    gridData: FlGridData(show: true),
                    borderData: FlBorderData(
                      show: true,
                      border: Border.all(color: Colors.grey),
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData
                            .asMap()
                            .entries
                            .map((e) => FlSpot(
                                e.key.toDouble(), e.value.sales))
                            .toList(),
                        isCurved: true,
                        barWidth: 3,
                        colors: [Colors.blue],
                        dotData: FlDotData(show: true),
                      ),
                    ],
                  ),
                ),
              ));
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontSize: 12,
    );
    Widget text;
    int index = value.toInt();
    if (index >= 0 && index < chartData.length) {
      text = Text(chartData[index].month.substring(0, 3), style: style);
    } else {
      text = Text('', style: style);
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:fl_chart/fl_chart.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class SalesData {
  final String month;
  final double sales;

  SalesData(this.month, this.sales);
}

class _HomePageState extends State<HomePage> {
  List<SalesData> chartData = [];

  @override
  void initState() {
    super.initState();
    fetchSalesData();
  }

  Future<void> fetchSalesData() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('SalesData'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        chartData = apiResponse.results!.map((data) {
          final month = data.get<String>('month') ?? '';
          final sales = data.get<num>('sales')?.toDouble() ?? 0.0;
          return SalesData(month, sales);
        }).toList();
      });
    } else {
      // Handle errors
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sales Chart'),
        ),
        body: chartData.isEmpty
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: LineChart(
                  LineChartData(
                    minY: 0,
                    maxY: 250,
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(showTitles: true),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: true,
                          getTitlesWidget: bottomTitleWidgets,
                          interval: 1,
                        ),
                      ),
                    ),
                    gridData: FlGridData(show: true),
                    borderData: FlBorderData(
                      show: true,
                      border: Border.all(color: Colors.grey),
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData
                            .asMap()
                            .entries
                            .map((e) => FlSpot(
                                e.key.toDouble(), e.value.sales))
                            .toList(),
                        isCurved: true,
                        barWidth: 3,
                        colors: [Colors.blue],
                        dotData: FlDotData(show: true),
                      ),
                    ],
                  ),
                ),
              ));
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontSize: 12,
    );
    Widget text;
    int index = value.toInt();
    if (index >= 0 && index < chartData.length) {
      text = Text(chartData[index].month.substring(0, 3), style: style);
    } else {
      text = Text('', style: style);
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}
﻿
Explanation
SalesData Class: A simple model class to hold the month and sales data.
fetchSalesData(): Fetches data from the SalesData class in Back4App and updates the chartData list.
LineChart: Uses fl_chart to create a line chart based on the fetched data.
bottomTitleWidgets(): Customizes the bottom axis labels to display the month abbreviations.
Step 6 – Running the App
Now that you have set up the frontend and backend, it's time to run your app.
In your terminal, navigate to your project directory.
Run the app using:
Bash
flutter run
flutter run
﻿
You should see a line chart displaying the sales data for each month.
Step 7 – Adding Interactivity and Customization
To make your chart more interactive and visually appealing, you can customize it further.
7.1. Customize Chart Appearance
Modify the LineChartBarData in your build method:
Dart
LineChartBarData(
  spots: chartData
      .asMap()
      .entries
      .map((e) => FlSpot(
          e.key.toDouble(), e.value.sales))
      .toList(),
  isCurved: true,
  barWidth: 3,
  colors: [Colors.blue],
  belowBarData: BarAreaData(
    show: true,
    colors: [Colors.blue.withOpacity(0.3)],
  ),
  dotData: FlDotData(
    show: true,
  ),
)
LineChartBarData(
  spots: chartData
      .asMap()
      .entries
      .map((e) => FlSpot(
          e.key.toDouble(), e.value.sales))
      .toList(),
  isCurved: true,
  barWidth: 3,
  colors: [Colors.blue],
  belowBarData: BarAreaData(
    show: true,
    colors: [Colors.blue.withOpacity(0.3)],
  ),
  dotData: FlDotData(
    show: true,
  ),
)
﻿
belowBarData: Adds a filled area below the line.
dotData: Shows dots at each data point.
7.2. Enable Touch Interactions
You can enable touch interactions to display tooltips.
Add the following to your LineChartData:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
Step 8 – Displaying Different Chart Types
You can also display other types of charts using fl_chart.
8.1. Pie Chart Example
Replace the LineChart in your build method with a PieChart:
Dart
PieChart(
  PieChartData(
    sections: chartData.map((data) {
      return PieChartSectionData(
        value: data.sales,
        title: data.month.substring(0, 3),
        color: Colors.primaries[chartData.indexOf(data) % Colors.primaries.length],
      );
    }).toList(),
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)
PieChart(
  PieChartData(
    sections: chartData.map((data) {
      return PieChartSectionData(
        value: data.sales,
        title: data.month.substring(0, 3),
        color: Colors.primaries[chartData.indexOf(data) % Colors.primaries.length],
      );
    }).toList(),
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)
﻿
PieChartSectionData: Defines each section of the pie chart.
Conclusion
In this tutorial, you learned how to use the fl_chart package to visualize data in your Flutter application. You integrated Back4App as a backend solution to store and retrieve data using the Parse SDK. By fetching data from Back4App and displaying it using various chart types, you can now build dynamic and interactive data visualizations in your Flutter apps.
To further enhance your application, consider exploring other chart types provided by fl_chart, such as bar charts and radar charts. You can also implement real-time data updates by integrating Live Queries from Back4App.
Additional Resources:
﻿Back4App Documentation﻿
﻿fl_chart Package on pub.dev﻿
﻿Parse SDK for Flutter Guide﻿
﻿Flutter Official Documentation﻿
Please make sure to replace placeholder values like 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with your actual Back4App credentials. Happy coding!
Updated 13 Sep 2024
Did this page help you?
How to Build an Advanced Endless Runner Game Using Flutter, the Casual Games Toolkit, and Back4app
Complete Guide to Third-Party Authentication in Flutter with Parse on Back4App