top of page
  • Writer's pictureRobin Alex Panicker

Integrating and Using Charts in Flutter


 Integrating and Using Charts in Flutter

Data visualization is a crucial aspect of mobile app development. Flutter, a popular open-source framework for building natively compiled applications for mobile, web, and desktop from a single codebase, offers various libraries and tools to integrate and use charts effectively.


In this article, we will explore how to integrate and use charts in Flutter applications.


Let's dive in!


1. Setting Up a Flutter Project


Before we begin, make sure you have Flutter installed on your system. If not, you can follow the official Flutter installation guide: https://flutter.dev/docs/get-started/install

Once Flutter is set up, create a new Flutter project using the following command:

flutter create flutter_chart_example

Navigate to the project directory:

cd flutter_chart_example

Now, you're ready to integrate charts into your Flutter app.


2. Choosing a Charting Library


Flutter offers various charting libraries to choose from, including fl_chart, charts_flutter, and syncfusion_flutter_charts.


In this article, we'll use fl_chart, a versatile and customizable charting library.


3. Installing the Charting Library


Open the pubspec.yaml file in your Flutter project and add the fl_chart dependency:

dependencies:
  flutter:
    sdk: flutter
    fl_chart: ^0.63.0

Run flutter pub get to install the dependency:

flutter pub get

4. Creating a Basic Chart


Let's create a basic line chart to display some sample data. Open the main.dart file and replace its content with the following code:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Chart Example'),
        ),
        body: Center(
          child: LineChart(
            LineChartData(
              gridData: FlGridData(show: false),
              titlesData: FlTitlesData(show: false),
              borderData: FlBorderData(
                show: true,
                border: Border.all(
                  color: const Color(0xff37434d),
                  width: 1,
                ),
              ),
              minX: 0,
              maxX: 7,
              minY: 0,
              maxY: 6,
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    FlSpot(0, 3),
                    FlSpot(1, 1),
                    FlSpot(2, 4),
                    FlSpot(3, 2),
                    FlSpot(4, 5),
                    FlSpot(5, 3),
                    FlSpot(6, 4),
                  ],
                  isCurved: true,
                  colors: [Colors.blue],
                  dotData: FlDotData(show: false),
                  belowBarData: BarAreaData(show: false),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

This code creates a basic line chart with sample data. It sets up the chart appearance and defines the data points.


5. Customizing the Chart


You can customize the chart further by tweaking its appearance, labels, and more. Explore the fl_chart documentation (https://pub.dev/packages/fl_chart) to learn about various customization options.


6. Adding Interactivity


To make your chart interactive, you can implement gestures like tap or swipe. The fl_chart library provides gesture support for charts. Refer to the documentation for details on adding interactivity.


7. Real-World Example: Stock Price Chart


As a more advanced example, let's create a stock price chart with historical data fetched from an API. We'll use the http package to make API requests.

// Import necessary packages at the top of main.dart
import 'package:http/http.dart' as http;
import 'dart:convert';

// Create a function to fetch stock price data
Future<List<FlSpot>> fetchStockPriceData() async {
  final response = await http.get(Uri.parse('YOUR_API_ENDPOINT_HERE'));

  if (response.statusCode == 200) {
    final List<dynamic> data = json.decode(response.body);
    final List<FlSpot> spots = [];

    for (var i = 0; i < data.length; i++) {
      spots.add(FlSpot(i.toDouble(), data[i]['price'].toDouble()));
    }

    return spots;
  } else {
    throw Exception('Failed to load stock price data');
  }
}

// Inside the LineChart widget, replace the spots with fetched data
lineBarsData: [
  LineChartBarData(
    spots: await fetchStockPriceData(), // Fetch and populate data
    isCurved: true,
    colors: [Colors.blue],
    dotData: FlDotData(show: false),
    belowBarData: BarAreaData(show: false),
  ),
],


Replace 'YOUR_API_ENDPOINT_HERE' with the actual API endpoint that provides historical stock price data in JSON format.


Conclusion


In this article, we explored how to integrate and use charts in Flutter applications. We started by setting up a Flutter project, choosing a charting library, and installing the fl_chart package. We created a basic line chart, customized it, and discussed adding interactivity. Finally, we implemented a real-world example of a stock price chart with data fetched from an API.


Charts are essential for visualizing data and providing insights in your Flutter applications. With the fl_chart library and the knowledge gained from this tutorial, you can create visually appealing and interactive charts to enhance your app's user experience.


Happy charting!

Blog for Mobile App Developers, Testers and App Owners

 

This blog is from Finotes Team. Finotes is a lightweight mobile APM and bug detection tool for iOS and Android apps.

In this blog we talk about iOS and Android app development technologies, languages and frameworks like Java, Kotlin, Swift, Objective-C, Dart and Flutter that are used to build mobile apps. Read articles from Finotes team about good programming and software engineering practices, testing and QA practices, performance issues and bugs, concepts and techniques. 

bottom of page