Comment visualiser des données dans Flutter avec fl_chart et Back4App

24min
Introduction
La visualisation des données est un aspect crucial des applications modernes, aidant les utilisateurs à comprendre des données complexes à travers des graphiques et des diagrammes intuitifs. Dans ce tutoriel, vous apprendrez à créer des graphiques interactifs et visuellement attrayants dans votre application Flutter en utilisant le fl_chart package. De plus, vous intégrerez Back4App—une plateforme de backend-as-a-service (BaaS) alimentée par Parse Server—pour stocker et récupérer des données pour vos graphiques. À la fin de ce tutoriel, vous aurez une application Flutter entièrement fonctionnelle qui affiche des données dynamiques récupérées de Back4App en utilisant divers types de graphiques comme des graphiques linéaires, à barres et circulaires.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Un compte Back4App. Si vous n'en avez pas, vous pouvez vous inscrire pour un compte gratuit sur Back4App.
Flutter SDK installé sur votre machine locale. Vous pouvez suivre le guide d'installation officiel de Flutter pour votre système d'exploitation.
Connaissances de base en Dart et Flutter. Si vous êtes nouveau sur Flutter, envisagez de consulter la documentation Flutter pour vous familiariser avec les bases.
Parse Server SDK pour Flutter ajouté à votre projet. Vous pouvez apprendre à le configurer en suivant le Guide SDK Flutter de Back4App.
Un IDE ou éditeur de texte tel que Visual Studio Code ou Android Studio.
Étape 1 – Configuration du Backend Back4App
Dans cette étape, vous allez créer une nouvelle application Back4App et configurer une classe de données pour stocker vos données de graphique.
1.1. Créer une nouvelle application Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom pour votre application, par exemple, "FlutterChartApp", et cliquez sur "Créer".
1.2. Configurer le modèle de données
Dans le tableau de bord de votre application, accédez à la "Base de données" section dans la barre latérale gauche.
Cliquez sur "Créer une classe" en haut de la page.
Dans la fenêtre modale qui apparaît :
Sélectionnez "Personnalisé".
Entrez "SalesData" comme nom de classe.
Cliquez sur "Créer la classe".
1.3. Ajouter des colonnes à la classe
Dans la classe "SalesData" , cliquez sur "+" pour ajouter une nouvelle colonne.
Ajoutez les colonnes suivantes :
mois: Type Chaîne
ventes: Type Nombre
Votre modèle de données est maintenant configuré pour stocker les données de ventes mensuelles, que vous visualiserez dans votre application Flutter.
Étape 2 – Remplir la base de données avec des données d'exemple
Avant de récupérer des données dans votre application, vous avez besoin de quelques données d'exemple dans votre base de données Back4App.
Toujours dans la classe "SalesData" , cliquez sur "+" pour ajouter une nouvelle ligne.
Entrez les données d'exemple suivantes :
Répétez les étapes ci-dessus pour ajouter toutes les entrées de données d'exemple.
Étape 3 – Configurer le projet Flutter
Dans cette étape, vous allez créer un nouveau projet Flutter et ajouter les dépendances nécessaires.
3.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Naviguez vers le répertoire du projet :
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Ajouter des dépendances à pubspec.yaml
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
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
﻿
Exécutez flutter pub get pour installer les packages.
Étape 4 – Initialiser Parse dans votre application Flutter
Pour connecter votre application Flutter à Back4App, vous devez initialiser le SDK Parse.
4.1. Obtenez les identifiants de l'application Back4App
Dans votre tableau de bord Back4App, accédez à "Paramètres de l'application" > "Sécurité et clés".
Notez votre ID d'application et votre clé client.
4.2. Initialiser Parse dans main.dart
Ouvrez lib/main.dart et modifiez-le comme suit :
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(),
    );
  }
}
﻿
Remplacez 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par les identifiants que vous avez obtenus de Back4App.
Étape 5 – Récupération des données depuis Back4App
Dans cette étape, vous allez récupérer les données de vente depuis Back4App en utilisant le SDK Parse.
5.1. Créer home_page.dart
Créez un nouveau fichier lib/home_page.dart et ajoutez le code suivant :
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,
    );
  }
}
﻿
Explication
SalesData Class: Une classe modèle simple pour contenir les données du mois et les données de vente.
fetchSalesData(): Récupère les données de la SalesData classe dans Back4App et met à jour la chartData liste.
LineChart: Utilise fl_chart pour créer un graphique linéaire basé sur les données récupérées.
bottomTitleWidgets(): Personnalise les étiquettes de l'axe inférieur pour afficher les abréviations des mois.
Étape 6 – Exécution de l'application
Maintenant que vous avez configuré le frontend et le backend, il est temps de lancer votre application.
Dans votre terminal, accédez à votre répertoire de projet.
Exécutez l'application en utilisant :
Bash
flutter run
flutter run
﻿
Vous devriez voir un graphique linéaire affichant les données de vente pour chaque mois.
Étape 7 – Ajout d'interactivité et de personnalisation
Pour rendre votre graphique plus interactif et visuellement attrayant, vous pouvez le personnaliser davantage.
7.1. Personnaliser l'apparence du graphique
Modifiez le LineChartBarData dans votre build méthode :
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: Ajoute une zone remplie sous la ligne.
dotData: Montre des points à chaque point de données.
7.2. Activer les interactions tactiles
Vous pouvez activer les interactions tactiles pour afficher des infobulles.
Ajoutez ce qui suit à votre LineChartData:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
Étape 8 – Affichage de différents types de graphiques
Vous pouvez également afficher d'autres types de graphiques en utilisant fl_chart.
8.1. Exemple de graphique à secteurs
Remplacez le LineChart dans votre build méthode par un 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: Définit chaque section du graphique en secteurs.
Conclusion
Dans ce tutoriel, vous avez appris à utiliser le fl_chart package pour visualiser des données dans votre application Flutter. Vous avez intégré Back4App comme solution backend pour stocker et récupérer des données en utilisant le SDK Parse. En récupérant des données de Back4App et en les affichant à l'aide de différents types de graphiques, vous pouvez désormais créer des visualisations de données dynamiques et interactives dans vos applications Flutter.
Pour améliorer davantage votre application, envisagez d'explorer d'autres types de graphiques fournis par fl_chart, tels que les graphiques à barres et les graphiques radar. Vous pouvez également mettre en œuvre des mises à jour de données en temps réel en intégrant les requêtes en direct de Back4App.
Ressources supplémentaires :
﻿Documentation de Back4App﻿
﻿Package fl_chart sur pub.dev﻿
﻿Guide du SDK Parse pour Flutter﻿
﻿Documentation officielle de Flutter﻿
Veuillez vous assurer de remplacer les valeurs de remplacement telles que 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par vos véritables identifiants Back4App. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un jeu de course sans fin avancé en utilisant Flutter, le Casual Games Toolkit et Back4app
Guide complet de l'authentification tierce en Flutter avec Parse sur Back4App