Plus
Créer des menus déroulants dans Flutter avec des données backend de Back4app

12min
Introduction
Avez-vous déjà eu du mal à créer des menus déroulants dynamiques dans Flutter ? Vous n'êtes pas seul ! Dans ce guide, nous vous guiderons pour construire un menu déroulant qui récupère ses options d'un backend Back4app. C'est plus facile que vous ne le pensez, et à la fin, vous aurez un menu déroulant flexible et basé sur des données dans votre application Flutter.
Imaginez que vous construisez une application pour un service de livraison de pizzas. Les garnitures disponibles peuvent changer fréquemment, donc les coder en dur n'est pas idéal. C'est là qu'un menu déroulant alimenté par un backend devient utile !
Prérequis
Avant de plonger, assurez-vous d'avoir un compte Back4app (ne vous inquiétez pas, c'est gratuit) et Flutter installé sur votre machine. Si vous êtes nouveau dans Flutter, consultez leur guide d'installation. Oh, et une compréhension de base de Dart et des widgets Flutter vous aidera, mais nous vous guiderons à travers les parties délicates !
Étape 1 – Configuration de votre backend Back4app
Configurons notre backend Back4app. Ne vous inquiétez pas, ce n'est pas aussi intimidant que cela en a l'air !
Tout d'abord, connectez-vous à votre compte Back4app. Pas de compte ? Pas de problème ! Rendez-vous sur Back4app.com et inscrivez-vous – c'est gratuit et rapide.
Créez un nouveau projet backend. Vous pouvez lui donner un nom astucieux comme 'AwesomeDropdownData' ou simplement opter pour 'DropdownExample' si vous vous sentez moins créatif aujourd'hui.
Maintenant, créons une classe Parse. Pensez-y comme une table spéciale pour nos options de menu déroulant. Nous l'appellerons 'Options' (imaginatif, n'est-ce pas ?). Ajoutez une colonne nommée optionValue (String) pour stocker nos choix de menu déroulant.
Il est temps d'ajouter des données d'exemple ! Remplissons notre classe 'Options' avec quelques garnitures de pizza délicieuses :
Pepperoni
Champignons
Fromage supplémentaire
Dernier point mais non des moindres, récupérez votre ID d'application et votre clé client dans les paramètres de votre projet. Nous en aurons besoin pour connecter notre application Flutter à Back4app.
Étape 2 – Configuration du projet Flutter
Créons un nouveau projet Flutter. Ouvrez votre terminal, trouvez un endroit confortable pour votre projet, et exécutez :
Bash
flutter create dropdown_example
flutter create dropdown_example
﻿
Maintenant, ajoutons quelques dépendances. Ouvrez pubspec.yaml et ajoutez ces lignes :
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
﻿
N'oubliez pas d'exécuter flutter pub get pour récupérer ces paquets !
Maintenant, disons à notre application Flutter comment communiquer avec Back4app. Ouvrez lib/main.dart et ajoutez ce code. Ne vous inquiétez pas s'il semble un peu intimidant – nous allons le décomposer !
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(),
    );
  }
}
﻿
N'oubliez pas de remplacer 'VOTRE_ID_APPLICATION_BACK4APP' et 'VOTRE_CLE_CLIENT_BACK4APP' par vos véritables identifiants Back4app. Ce sont comme la poignée de main secrète entre votre application et Back4app !
Étape 3 – Création du Menu Déroulant
Maintenant pour la partie amusante – créons notre menu déroulant !
Voici le code pour notre DropdownMenuScreen widget. Cela peut sembler beaucoup, mais nous allons le décomposer, promis !
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!;
                  });
                },
              ),
            ),
    );
  }
}
﻿
Ouf, c'est un bon morceau de code ! Mais ne paniquez pas – décomposons-le morceau par morceau. Ce widget fait quelques choses clés pour nous :
Il se connecte à notre backend Back4app et récupère notre liste d'options. Pensez-y comme un serveur vous apportant le menu dans un restaurant.
Pendant qu'il récupère, il affiche un indicateur de chargement. Parce que personne n'aime regarder un écran vide, n'est-ce pas ?
Une fois qu'il a les options, il les affiche dans un joli menu déroulant.
Lorsque vous choisissez une option, il se souvient de votre choix.
Cool, non ? Et le meilleur, c'est que chaque fois que vous mettez à jour les options dans Back4app, votre application affichera automatiquement la nouvelle liste la prochaine fois qu'elle se charge. Magique !
Étape 4 – Exécution de l'Application
C'est le moment de vérité ! Exécutez votre application en utilisant flutter run. Si tout se passe bien, vous devriez voir un menu déroulant rempli des garnitures de pizza que nous avons stockées dans Back4app.
Allez-y, sélectionnez une garniture. Remarquez comment cela se met à jour instantanément ? C'est la puissance de la gestion d'état dans Flutter !
Meilleures pratiques pour les menus déroulants avec intégration backend
Gérer les états de chargement: Comme vous l'avez vu dans notre exemple, nous utilisons un indicateur de chargement lors de la récupération des données. C'est comme mettre de la musique pendant que vos invités attendent le dîner – cela rend simplement l'expérience meilleure !
Gestion des erreurs: Dans une application réelle, vous voudriez ajouter une gestion des erreurs. Que se passe-t-il si l'internet est en panne ? Ou si Back4app fait une sieste ? Prévoyez toujours l'imprévu !
Utiliser la pagination: Si votre liste déroulante devient plus longue que la liste des ingrédients d'une pizza de style Chicago, envisagez de mettre en œuvre la pagination. Vos utilisateurs (et leurs appareils) vous remercieront.
Conclusion
Vous venez de créer un menu déroulant intelligent alimenté par un backend dans Flutter ! 🎉 Pourquoi ne pas essayer d'étendre cet exemple ? Peut-être ajouter un bouton qui ajoute la garniture sélectionnée à une commande de pizza, ou essayer d'afficher les options dans un autre composant UI. Le ciel est la limite !
Et rappelez-vous, si vous êtes bloqué ou avez des questions, les communautés Flutter et Back4app sont très utiles. N'hésitez pas à demander de l'aide !
Maintenant, allez-y et construisez des interfaces utilisateur dynamiques et impressionnantes ! 💪
Pour plus d'informations, consultez la documentation Flutter et documentation Back4app. Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment utiliser Uint8List dans Flutter et le persister dans le backend en utilisant Back4app
Flutter, Google Wallet et Back4App : Tutoriel sur l'application de récompenses environnementales