Di più
Come visualizzare i dati in Flutter con fl_chart e Back4App

24min
Introduzione
La visualizzazione dei dati è un aspetto cruciale delle applicazioni moderne, aiutando gli utenti a comprendere dati complessi attraverso grafici e diagrammi intuitivi. In questo tutorial, imparerai come creare grafici interattivi e visivamente accattivanti nella tua applicazione Flutter utilizzando il fl_chart pacchetto. Inoltre, integrerai Back4App—una piattaforma backend-as-a-service (BaaS) alimentata da Parse Server—per memorizzare e recuperare dati per i tuoi grafici. Alla fine di questo tutorial, avrai un'app Flutter completamente funzionale che visualizza dati dinamici recuperati da Back4App utilizzando vari tipi di grafici come grafici a linee, a barre e a torta.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Un account Back4App. Se non ne hai uno, puoi registrarti per un account gratuito su Back4App.
Flutter SDK installato sul tuo computer locale. Puoi seguire la guida ufficiale all'installazione di Flutter per il tuo sistema operativo.
Conoscenze di base di Dart e Flutter. Se sei nuovo a Flutter, considera di rivedere la documentazione di Flutter per familiarizzare con le basi.
Parse Server SDK per Flutter aggiunto al tuo progetto. Puoi imparare come configurarlo seguendo la Guida al SDK Flutter di Back4App.
Un IDE o editor di testo come Visual Studio Code o Android Studio.
Passo 1 – Configurazione del Backend di Back4App
In questo passo, creerai una nuova applicazione Back4App e configurerai una classe di dati per memorizzare i dati del tuo grafico.
1.1. Crea una Nuova Applicazione Back4App
Accedi al tuo dashboard di Back4App.
Clicca su "Crea nuova App".
Inserisci un nome per la tua applicazione, ad esempio, "FlutterChartApp", e clicca su "Crea".
1.2. Configurare il Modello di Dati
Nella dashboard della tua applicazione, vai alla "Database" sezione nella barra laterale sinistra.
Clicca su "Crea una classe" in cima alla pagina.
Nella finestra modale che appare:
Seleziona "Personalizzato".
Inserisci "SalesData" come nome della classe.
Clicca "Crea classe".
1.3. Aggiungere Colonne alla Classe
Nella classe "SalesData" clicca su "+" per aggiungere una nuova colonna.
Aggiungi le seguenti colonne:
mese: Tipo Stringa
vendite: Tipo Numero
Il tuo modello di dati è ora configurato per memorizzare i dati di vendita mensili, che visualizzerai nella tua app Flutter.
Passo 2 – Popolare il Database con Dati di Esempio
Prima di recuperare i dati nella tua app, hai bisogno di alcuni dati di esempio nel tuo database Back4App.
Ancora nella classe "SalesData" clicca su "+" per aggiungere una nuova riga.
Inserisci i seguenti dati di esempio:
Ripeti i passaggi sopra per aggiungere tutte le voci di dati di esempio.
Passo 3 – Configurare il Progetto Flutter
In questo passaggio, creerai un nuovo progetto Flutter e aggiungerai le dipendenze necessarie.
3.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Naviga nella directory del progetto:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Aggiungi Dipendenze a pubspec.yaml
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui flutter pub get per installare i pacchetti.
Passo 4 – Inizializzazione di Parse nella tua app Flutter
Per collegare la tua app Flutter a Back4App, devi inizializzare il SDK di Parse.
4.1. Ottieni le credenziali dell'applicazione Back4App
Nel tuo dashboard di Back4App, vai a "Impostazioni App" > "Sicurezza e Chiavi".
Annota il tuo ID Applicazione e Chiave Client.
4.2. Inizializza Parse in main.dart
Apri lib/main.dart e modificalo come segue:
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(),
    );
  }
}
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le credenziali ottenute da Back4App.
Passo 5 – Recupero dei dati da Back4App
In questo passo, recupererai i dati di vendita da Back4App utilizzando il Parse SDK.
5.1. Crea home_page.dart
Crea un nuovo file lib/home_page.dart e aggiungi il seguente codice:
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,
    );
  }
}
﻿
Spiegazione
SalesData Class: Una semplice classe modello per contenere i dati del mese e delle vendite.
fetchSalesData(): Recupera i dati dalla SalesData classe in Back4App e aggiorna la chartData lista.
LineChart: Usa fl_chart, per creare un grafico a linee basato sui dati recuperati.
bottomTitleWidgets(): Personalizza le etichette dell'asse inferiore per visualizzare le abbreviazioni dei mesi.
Passo 6 – Esecuzione dell'App
Ora che hai configurato il frontend e il backend, è tempo di eseguire la tua app.
Nel tuo terminale, naviga nella directory del tuo progetto.
Esegui l'app utilizzando:
Bash
flutter run
flutter run
﻿
Dovresti vedere un grafico a linee che mostra i dati di vendita per ogni mese.
Passo 7 – Aggiungere Interattività e Personalizzazione
Per rendere il tuo grafico più interattivo e visivamente attraente, puoi personalizzarlo ulteriormente.
7.1. Personalizza l'Aspetto del Grafico
Modifica il LineChartBarData nel tuo build metodo:
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: Aggiunge un'area riempita sotto la linea.
dotData: Mostra punti in ciascun punto dati.
7.2. Abilita Interazioni Touch
Puoi abilitare le interazioni touch per visualizzare i tooltip.
Aggiungi quanto segue al tuo LineChartData:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
Passo 8 – Visualizzazione di Diversi Tipi di Grafico
Puoi anche visualizzare altri tipi di grafici utilizzando fl_chart.
8.1. Esempio di Grafico a Torta
Sostituisci il LineChart nel tuo build metodo con 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: Definisce ogni sezione del grafico a torta.
Conclusione
In questo tutorial, hai imparato come utilizzare il fl_chart pacchetto per visualizzare i dati nella tua applicazione Flutter. Hai integrato Back4App come soluzione backend per memorizzare e recuperare dati utilizzando il Parse SDK. Recuperando dati da Back4App e visualizzandoli utilizzando vari tipi di grafico, ora puoi costruire visualizzazioni di dati dinamiche e interattive nelle tue app Flutter.
Per migliorare ulteriormente la tua applicazione, considera di esplorare altri tipi di grafico forniti da fl_chart, come grafici a barre e grafici radar. Puoi anche implementare aggiornamenti dei dati in tempo reale integrando le Live Queries di Back4App.
Risorse aggiuntive:
﻿Documentazione di Back4App﻿
﻿Pacchetto fl_chart su pub.dev﻿
﻿Guida al Parse SDK per Flutter﻿
﻿Documentazione ufficiale di Flutter﻿
Assicurati di sostituire i valori segnaposto come 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali reali di Back4App. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un gioco Endless Runner avanzato utilizzando Flutter, il Casual Games Toolkit e Back4app
AVANTI IL PROSSIMO
Guida completa all'autenticazione di terze parti in Flutter con Parse su Back4App