Mehr
Dropdown-Menüs in Flutter mit Backend-Daten von Back4app erstellen

12min
Einführung
Haben Sie jemals Schwierigkeiten gehabt, dynamische Dropdown-Menüs in Flutter zu erstellen? Sie sind nicht allein! In diesem Leitfaden zeigen wir Ihnen, wie Sie ein Dropdown-Menü erstellen, das seine Optionen von einem Back4app-Backend abruft. Es ist einfacher, als Sie denken, und am Ende haben Sie ein flexibles, datengestütztes Dropdown in Ihrer Flutter-App.
Stellen Sie sich vor, Sie bauen eine App für einen Pizzalieferdienst. Die verfügbaren Beläge könnten sich häufig ändern, daher ist es nicht ideal, sie fest einzugeben. Hier kommt ein backend-gesteuertes Dropdown ins Spiel!
Voraussetzungen
Bevor wir eintauchen, stellen Sie sicher, dass Sie ein Back4app-Konto haben (keine Sorge, die Anmeldung ist kostenlos) und Flutter auf Ihrem Computer installiert ist. Wenn Sie neu bei Flutter sind, schauen Sie sich deren Installationsanleitung an. Oh, und ein grundlegendes Verständnis von Dart und Flutter-Widgets wird hilfreich sein, aber wir werden Sie durch die kniffligen Teile führen!
Schritt 1 – Einrichten Ihres Back4app-Backends
Lassen Sie uns unser Back4app-Backend einrichten. Keine Sorge, es ist nicht so einschüchternd, wie es klingt!
Zuerst melden Sie sich bei Ihrem Back4app-Konto an. Kein Konto? Kein Problem! Gehen Sie zu Back4app.com und melden Sie sich an – es ist kostenlos und schnell.
Erstellen Sie ein neues Backend-Projekt. Sie können es etwas Cleveres wie 'AwesomeDropdownData' nennen oder einfach 'DropdownExample' wählen, wenn Sie heute weniger kreativ sind.
Jetzt erstellen wir eine Parse-Klasse. Denken Sie daran als eine spezielle Tabelle für unsere Dropdown-Optionen. Wir nennen sie 'Options' (einfallsreich, oder?). Fügen Sie eine Spalte mit dem Namen optionValue (String) hinzu, um unsere Dropdown-Auswahlen zu speichern.
Zeit, einige Beispieldaten hinzuzufügen! Lassen Sie uns unsere 'Options'-Klasse mit ein paar leckeren Pizzabelägen füllen:
Pepperoni
Champignons
Extra Käse
Last but not least, holen Sie sich Ihre Anwendungs-ID und den Client-Schlüssel aus den Projekteinstellungen. Wir benötigen diese, um unsere Flutter-App mit Back4app zu verbinden.
Schritt 2 – Einrichten des Flutter-Projekts
Lass uns ein neues Flutter-Projekt erstellen. Öffne dein Terminal, finde einen gemütlichen Platz für dein Projekt und führe aus:
Bash
flutter create dropdown_example
flutter create dropdown_example
﻿
Jetzt lass uns einige Abhängigkeiten hinzufügen. Öffne pubspec.yaml und füge diese Zeilen hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0  # Use the latest version available
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0  # Use the latest version available
﻿
Vergiss nicht, flutter pub get auszuführen, um diese Pakete abzurufen!
Jetzt lass uns unserer Flutter-App sagen, wie sie mit Back4app kommunizieren kann. Öffne lib/main.dart und füge diesen Code hinzu. Mach dir keine Sorgen, wenn es ein wenig einschüchternd aussieht – wir werden es aufschlüsseln!
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DropdownMenuScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DropdownMenuScreen(),
    );
  }
}
﻿
Denke daran, 'YOUR_BACK4APP_APP_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch deine tatsächlichen Back4app-Anmeldeinformationen zu ersetzen. Diese sind wie der geheime Handschlag zwischen deiner App und Back4app!
Schritt 3 – Erstellen des Dropdown-Menüs
Jetzt kommt der spaßige Teil – lass uns unser Dropdown-Menü erstellen!
Hier ist der Code für unser DropdownMenuScreen Widget. Es sieht vielleicht nach viel aus, aber wir werden es Stück für Stück aufschlüsseln, versprochen!
Dart
class DropdownMenuScreen extends StatefulWidget {
  @override
  _DropdownMenuScreenState createState() => _DropdownMenuScreenState();
}

class _DropdownMenuScreenState extends State<DropdownMenuScreen> {
  String? _selectedOption;
  List<String> _options = [];
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _fetchOptions();
  }

  Future<void> _fetchOptions() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Options'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        _options = response.results!.map((e) => e.get<String>('optionValue')!).toList();
        _loading = false;
      });
    } else {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pizza Topping Selector')),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: DropdownButton<String>(
                value: _selectedOption,
                hint: Text('Choose your topping'),
                items: _options.map((String option) {
                  return DropdownMenuItem<String>(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedOption = newValue!;
                  });
                },
              ),
            ),
    );
  }
}
class DropdownMenuScreen extends StatefulWidget {
  @override
  _DropdownMenuScreenState createState() => _DropdownMenuScreenState();
}

class _DropdownMenuScreenState extends State<DropdownMenuScreen> {
  String? _selectedOption;
  List<String> _options = [];
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _fetchOptions();
  }

  Future<void> _fetchOptions() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Options'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        _options = response.results!.map((e) => e.get<String>('optionValue')!).toList();
        _loading = false;
      });
    } else {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pizza Topping Selector')),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: DropdownButton<String>(
                value: _selectedOption,
                hint: Text('Choose your topping'),
                items: _options.map((String option) {
                  return DropdownMenuItem<String>(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedOption = newValue!;
                  });
                },
              ),
            ),
    );
  }
}
﻿
Puh, das ist ein Stück Code! Aber keine Panik – lass es uns Stück für Stück aufschlüsseln. Dieses Widget macht ein paar wichtige Dinge für uns:
Es greift auf unser Back4app-Backend zu und holt unsere Liste von Optionen. Denk daran wie an einen Kellner, der dir die Speisekarte in einem Restaurant bringt.
Während es die Optionen abruft, zeigt es einen Ladeindikator. Denn niemand mag es, auf einen leeren Bildschirm zu starren, oder?
Sobald es die Optionen hat, zeigt es sie in einem schönen Dropdown-Menü an.
Wenn du eine Option auswählst, merkt es sich deine Wahl.
Cool, oder? Und das Beste daran ist, dass, wann immer du die Optionen in Back4app aktualisierst, deine App beim nächsten Laden automatisch die neue Liste anzeigt. Magie!
Schritt 4 – Die App ausführen
Zeit für die Stunde der Wahrheit! Führen Sie Ihre App mit flutter run. Wenn alles gut geht, sollten Sie ein Dropdown-Menü sehen, das mit den Pizzabelägen gefüllt ist, die wir in Back4app gespeichert haben.
Fahren Sie fort, wählen Sie einen Belag aus. Beachten Sie, wie es sofort aktualisiert wird? Das ist die Kraft des Zustandsmanagements in Flutter!
Best Practices für Dropdown-Menüs mit Backend-Integration
Ladezustände verwalten: Wie Sie in unserem Beispiel gesehen haben, verwenden wir einen Ladeindikator, während wir Daten abrufen. Es ist wie Musik aufzulegen, während Ihre Gäste auf das Abendessen warten – es macht das Erlebnis einfach besser!
Fehlerbehandlung: In einer realen App möchten Sie einige Fehlerbehandlungen hinzufügen. Was ist, wenn das Internet ausfällt? Oder Back4app ein Nickerchen macht? Planen Sie immer für das Unerwartete!
Pagination verwenden: Wenn Ihre Dropdown-Liste länger wird als die Liste der Zutaten in einer Chicago-Style-Pizza, sollten Sie in Betracht ziehen, eine Pagination zu implementieren. Ihre Benutzer (und deren Geräte) werden es Ihnen danken.
Fazit
Sie haben gerade ein intelligentes, backend-gestütztes Dropdown-Menü in Flutter erstellt! 🎉 Warum versuchen Sie nicht, dieses Beispiel zu erweitern? Vielleicht fügen Sie einen Button hinzu, der den ausgewählten Belag zu einer Pizza-Bestellung hinzufügt, oder versuchen Sie, die Optionen in einer anderen UI-Komponente anzuzeigen. Der Himmel ist die Grenze!
Und denken Sie daran, wenn Sie stecken bleiben oder Fragen haben, sind die Flutter- und Back4app-Communities super hilfreich. Scheuen Sie sich nicht, um Hilfe zu bitten!
Jetzt gehen Sie hinaus und bauen Sie großartige, dynamische UIs! 💪
Für weitere Informationen besuchen Sie die Flutter-Dokumentation und Back4app-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man Uint8List in Flutter verwendet und es im Backend mit Back4app speichert
ALS NÄCHSTES
Flutter, Google Wallet und Back4App: Anleitung zur Umweltbelohnungs-App