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

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 https //www back4app com/ flutter sdk installé sur votre machine locale vous pouvez suivre le guide d'installation officiel de flutter https //flutter dev/docs/get started/install 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 https //flutter dev/docs 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 https //www back4app com/docs/flutter/parse flutter sdk 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 https //dashboard back4app com/ 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 flutter create flutter chart app naviguez vers le répertoire du projet cd flutter chart app 3 2 ajouter des dépendances à pubspec yaml ouvrez pubspec yaml et ajoutez les dépendances suivantes 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 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 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 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 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 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 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 https //www back4app com/docs package fl chart sur pub dev https //pub dev/packages/fl chart guide du sdk parse pour flutter https //docs parseplatform org/flutter/guide/ documentation officielle de flutter https //flutter dev/docs 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 !