Mehr
Wie man Daten in Flutter mit fl_chart und Back4App visualisiert

24min
Einführung
Datenvisualisierung ist ein entscheidender Aspekt moderner Anwendungen, der den Benutzern hilft, komplexe Daten durch intuitive Grafiken und Diagramme zu verstehen. In diesem Tutorial lernen Sie, wie Sie interaktive und visuell ansprechende Diagramme in Ihrer Flutter-Anwendung mit dem fl_chart-Paket erstellen. Darüber hinaus integrieren Sie Back4App – eine Backend-as-a-Service (BaaS)-Plattform, die von Parse Server betrieben wird – um Daten für Ihre Diagramme zu speichern und abzurufen. Am Ende dieses Tutorials haben Sie eine voll funktionsfähige Flutter-App, die dynamische Daten anzeigt, die von Back4App abgerufen werden, und zwar mit verschiedenen Diagrammtypen wie Linien-, Balken- und Tortendiagrammen.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4App-Konto. Wenn Sie noch keines haben, können Sie sich für ein kostenloses Konto bei Back4App anmelden.
Flutter SDK auf Ihrem lokalen Computer installiert. Sie können die offizielle Flutter-Installationsanleitung für Ihr Betriebssystem befolgen.
Grundkenntnisse in Dart und Flutter. Wenn Sie neu bei Flutter sind, sollten Sie die Flutter-Dokumentation durchsehen, um sich mit den Grundlagen vertraut zu machen.
Parse Server SDK für Flutter in Ihr Projekt integriert. Sie können lernen, wie Sie es einrichten, indem Sie die Back4App Flutter SDK-Anleitung befolgen.
Eine IDE oder einen Texteditor wie Visual Studio Code oder Android Studio.
Schritt 1 – Einrichten des Back4App Backends
In diesem Schritt erstellen Sie eine neue Back4App-Anwendung und richten eine Datenklasse ein, um Ihre Diagrammdaten zu speichern.
1.1. Erstellen Sie eine neue Back4App-Anwendung
Melden Sie sich bei Ihrem Back4App-Dashboard an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen Namen für Ihre Anwendung ein, z.B. "FlutterChartApp", und klicken Sie auf "Erstellen".
1.2. Richten Sie das Datenmodell ein
Navigieren Sie in Ihrem Anwendungs-Dashboard zum "Datenbank"-Bereich in der linken Seitenleiste.
Klicken Sie auf "Klasse erstellen" oben auf der Seite.
In dem erscheinenden Modalfenster:
Wählen Sie "Benutzerdefiniert" aus.
Geben Sie "SalesData" als Klassennamen ein.
Klicken Sie auf "Klasse erstellen".
1.3. Fügen Sie der Klasse Spalten hinzu
Klicken Sie in der "SalesData"-Klasse auf "+" um eine neue Spalte hinzuzufügen.
Fügen Sie die folgenden Spalten hinzu:
Monat: Typ String
Verkäufe: Typ Zahl
Ihr Datenmodell ist jetzt eingerichtet, um monatliche Verkaufsdaten zu speichern, die Sie in Ihrer Flutter-App visualisieren werden.
Schritt 2 – Füllen der Datenbank mit Beispieldaten
Bevor Sie Daten in Ihrer App abrufen, benötigen Sie einige Beispieldaten in Ihrer Back4App-Datenbank.
Bleiben Sie in der "SalesData"-Klasse und klicken Sie auf "+" um eine neue Zeile hinzuzufügen.
Geben Sie die folgenden Beispieldaten ein:
Wiederholen Sie die obigen Schritte, um alle Beispieldatensätze hinzuzufügen.
Schritt 3 – Einrichten des Flutter-Projekts
In diesem Schritt erstellen Sie ein neues Flutter-Projekt und fügen die erforderlichen Abhängigkeiten hinzu.
3.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und führen Sie aus:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Navigieren Sie zum Projektverzeichnis:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Abhängigkeiten zu pubspec.yaml
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
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
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
Schritt 4 – Parse in Ihrer Flutter-App initialisieren
Um Ihre Flutter-App mit Back4App zu verbinden, müssen Sie das Parse SDK initialisieren.
4.1. Back4App-Anwendungsanmeldeinformationen erhalten
Navigieren Sie in Ihrem Back4App-Dashboard zu "App-Einstellungen" > "Sicherheit & Schlüssel".
Notieren Sie sich Ihre Anwendungs-ID und Client-Schlüssel.
4.2. Parse in main.dart
Öffnen Sie lib/main.dart und ändern Sie es wie folgt:
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(),
    );
  }
}
﻿
Ersetzen Sie 'YOUR_APPLICATION_ID' und 'YOUR_CLIENT_KEY' mit den Anmeldeinformationen, die Sie von Back4App erhalten haben.
Schritt 5 – Daten von Back4App abrufen
In diesem Schritt werden Sie die Verkaufsdaten von Back4App mit dem Parse SDK abrufen.
5.1. Erstellen Sie home_page.dart
Erstellen Sie eine neue Datei lib/home_page.dart und fügen Sie den folgenden Code hinzu:
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,
    );
  }
}
﻿
Erklärung
SalesData Klasse: Eine einfache Modellklasse zur Speicherung der Monats- und Verkaufsdaten.
fetchSalesData(): Ruft Daten aus der SalesData Klasse in Back4App ab und aktualisiert die chartData Liste.
LineChart: Verwendet fl_chart, um ein Liniendiagramm basierend auf den abgerufenen Daten zu erstellen.
bottomTitleWidgets(): Passt die Beschriftungen der unteren Achse an, um die Monatsabkürzungen anzuzeigen.
Schritt 6 – Die App ausführen
Jetzt, da Sie das Frontend und das Backend eingerichtet haben, ist es Zeit, Ihre App auszuführen.
Navigieren Sie in Ihrem Terminal zu Ihrem Projektverzeichnis.
Führen Sie die App mit folgendem Befehl aus:
Bash
flutter run
flutter run
﻿
Sie sollten ein Liniendiagramm sehen, das die Verkaufsdaten für jeden Monat anzeigt.
Schritt 7 – Interaktivität und Anpassung hinzufügen
Um Ihr Diagramm interaktiver und visuell ansprechender zu gestalten, können Sie es weiter anpassen.
7.1. Erscheinungsbild des Diagramms anpassen
Ändern Sie die LineChartBarData in Ihrer build-Methode:
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: Fügt einen gefüllten Bereich unter der Linie hinzu.
dotData: Zeigt Punkte an jedem Datenpunkt an.
7.2. Touch-Interaktionen aktivieren
Sie können Touch-Interaktionen aktivieren, um Tooltips anzuzeigen.
Fügen Sie Folgendes zu Ihrem LineChartData:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
Schritt 8 – Verschiedene Diagrammtypen anzeigen
Sie können auch andere Diagrammtypen mit fl_chart anzeigen.
8.1. Beispiel für ein Kreisdiagramm
Ersetzen Sie das LineChart in Ihrer build-Methode durch ein 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: Definiert jeden Abschnitt des Kreisdiagramms.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie das fl_chart-Paket verwenden, um Daten in Ihrer Flutter-Anwendung zu visualisieren. Sie haben Back4App als Backend-Lösung integriert, um Daten mit dem Parse SDK zu speichern und abzurufen. Durch das Abrufen von Daten von Back4App und deren Anzeige mit verschiedenen Diagrammtypen können Sie jetzt dynamische und interaktive Datenvisualisierungen in Ihren Flutter-Apps erstellen.
Um Ihre Anwendung weiter zu verbessern, sollten Sie andere von fl_chart, wie Balkendiagramme und Radardiagramme, bereitgestellte Diagrammtypen erkunden. Sie können auch Echtzeitdatenaktualisierungen implementieren, indem Sie Live Queries von Back4App integrieren.
Zusätzliche Ressourcen:
﻿Back4App-Dokumentation﻿
﻿fl_chart-Paket auf pub.dev﻿
﻿Parse SDK für Flutter-Leitfaden﻿
﻿Offizielle Flutter-Dokumentation﻿
Bitte stellen Sie sicher, dass Sie Platzhalterwerte wie 'YOUR_APPLICATION_ID' und 'YOUR_CLIENT_KEY' durch Ihre tatsächlichen Back4App-Anmeldeinformationen ersetzen. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein fortgeschrittenes endloses Laufspiel mit Flutter, dem Casual Games Toolkit und Back4app erstellt
ALS NÄCHSTES
Vollständiger Leitfaden zur Authentifizierung von Drittanbietern in Flutter mit Parse auf Back4App