Di più
Build a dropdown menu in Flutter with backend data from Back4app

12min
Introduzione
Hai mai avuto difficoltà a creare menu a discesa dinamici in Flutter? Non sei solo! In questa guida, ti guideremo nella costruzione di un menu a discesa che recupera le sue opzioni da un backend Back4app. È più facile di quanto tu possa pensare, e alla fine avrai un menu a discesa flessibile e basato sui dati nella tua app Flutter.
Immagina di costruire un'app per un servizio di consegna di pizza. I condimenti disponibili potrebbero cambiare frequentemente, quindi codificarli non è l'ideale. È qui che entra in gioco un menu a discesa guidato dal backend!
Prerequisiti
Prima di immergerci, assicurati di avere un account Back4app (non preoccuparti, è gratuito registrarsi) e Flutter installato sul tuo computer. Se sei nuovo in Flutter, dai un'occhiata alla loro guida all'installazione. Oh, e una comprensione di base di Dart e dei widget Flutter sarà utile, ma ti guideremo attraverso le parti più difficili!
Passo 1 – Configurare il tuo backend Back4app
Impostiamo il nostro backend Back4app. Non preoccuparti, non è così scoraggiante come sembra!
Per prima cosa, accedi al tuo account Back4app. Nessun account? Nessun problema! Vai su Back4app.com e registrati – è gratuito e veloce.
Crea un nuovo progetto backend. Puoi chiamarlo qualcosa di ingegnoso come 'AwesomeDropdownData' o semplicemente andare con 'DropdownExample' se oggi ti senti meno creativo.
Ora, creiamo una Classe Parse. Pensala come una tabella speciale per le nostre opzioni a discesa. La chiameremo 'Options' (imaginativa, vero?). Aggiungi una colonna chiamata optionValue (String) per memorizzare le nostre scelte a discesa.
È tempo di aggiungere alcuni dati di esempio! Popoliamo la nostra classe 'Options' con alcuni gustosi condimenti per pizza:
Pepperoni
Funghi
Formaggio Extra
Ultimo ma non meno importante, prendi il tuo ID applicazione e la chiave client dalle impostazioni del tuo progetto. Ne avremo bisogno per collegare la nostra app Flutter a Back4app.
Passo 2 – Configurare il progetto Flutter
Creiamo un nuovo progetto Flutter. Apri il tuo terminale, trova un posto comodo per il tuo progetto e esegui:
Bash
flutter create dropdown_example
flutter create dropdown_example
﻿
Ora, aggiungiamo alcune dipendenze. Apri pubspec.yaml e aggiungi queste righe:
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
﻿
Non dimenticare di eseguire flutter pub get per recuperare questi pacchetti!
Ora, diciamo alla nostra app Flutter come comunicare con Back4app. Apri lib/main.dart e aggiungi questo codice. Non preoccuparti se sembra un po' intimidatorio – lo analizzeremo!
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(),
    );
  }
}
﻿
Ricorda di sostituire 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue reali credenziali di Back4app. Questi sono come la stretta di mano segreta tra la tua app e Back4app!
Passo 3 – Creazione del Menu a Discesa
Ora per la parte divertente – creiamo il nostro menu a discesa!
Ecco il codice per il nostro DropdownMenuScreen widget. Potrebbe sembrare molto, ma lo analizzeremo, lo prometto!
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!;
                  });
                },
              ),
            ),
    );
  }
}
﻿
Uff, è un bel pezzo di codice! Ma non farti prendere dal panico – analizziamolo pezzo per pezzo. Questo widget sta facendo alcune cose chiave per noi:
Sta contattando il nostro backend di Back4app e recuperando la nostra lista di opzioni. Pensalo come un cameriere che ti porta il menu in un ristorante.
Mentre recupera, mostra un indicatore di caricamento. Perché a nessuno piace fissare uno schermo vuoto, giusto?
Una volta che ha le opzioni, le visualizza in un bel menu a discesa.
Quando scegli un'opzione, ricorda la tua scelta.
Figo, vero? E la parte migliore è che, ogni volta che aggiorni le opzioni in Back4app, la tua app mostrerà automaticamente la nuova lista la prossima volta che si carica. Magia!
Passo 4 – Esecuzione dell'App
È tempo del momento della verità! Esegui la tua app usando flutter run. Se tutto va bene, dovresti vedere un menu a discesa popolato con i condimenti per la pizza che abbiamo memorizzato in Back4app.
Vai avanti, seleziona un condimento. Noti come si aggiorna istantaneamente? Questa è la potenza della gestione dello stato in Flutter!
Migliori pratiche per i menu a discesa con integrazione backend
Gestisci gli stati di caricamento: Come hai visto nel nostro esempio, utilizziamo un indicatore di caricamento mentre recuperiamo i dati. È come mettere della musica mentre i tuoi ospiti aspettano la cena – rende semplicemente l'esperienza migliore!
Gestione degli errori: In un'app del mondo reale, vorresti aggiungere un po' di gestione degli errori. E se internet non funziona? O Back4app sta facendo un pisolino? Pianifica sempre l'inaspettato!
Usa la paginazione: Se la tua lista a discesa cresce più lunga della lista degli ingredienti in una pizza in stile Chicago, considera di implementare la paginazione. I tuoi utenti (e i loro dispositivi) ti ringrazieranno.
Conclusione
Hai appena costruito un menu a discesa intelligente, alimentato da backend in Flutter! 🎉 Perché non provi ad estendere questo esempio? Magari aggiungi un pulsante che aggiunge il condimento selezionato a un ordine di pizza, o prova a visualizzare le opzioni in un componente UI diverso. Il cielo è il limite!
E ricorda, se ti blocchi o hai domande, le comunità di Flutter e Back4app sono super utili. Non essere timido nel chiedere aiuto!
Ora vai e costruisci interfacce utente dinamiche e fantastiche! 💪
Per ulteriori informazioni, dai un'occhiata alla documentazione di Flutter e documentazione di Back4app. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come utilizzare Uint8List in Flutter e persisterlo nel backend utilizzando Back4App?
AVANTI IL PROSSIMO
Flutter, Google Wallet e Back4App: Tutorial per un'app di ricompense ambientali