Más
Construyendo Menús Desplegables en Flutter con Datos de Backend de Back4app

12min
Introducción
¿Alguna vez has tenido problemas para crear menús desplegables dinámicos en Flutter? ¡No estás solo! En esta guía, te guiaremos a través de la construcción de un menú desplegable que obtiene sus opciones de un backend de Back4app. Es más fácil de lo que piensas, y al final, tendrás un menú desplegable flexible y basado en datos en tu aplicación Flutter.
Imagina que estás construyendo una aplicación para un servicio de entrega de pizzas. Los ingredientes disponibles pueden cambiar con frecuencia, por lo que codificarlos no es lo ideal. ¡Ahí es donde un menú desplegable impulsado por un backend resulta útil!
Requisitos previos
Antes de sumergirnos, asegúrate de tener una cuenta de Back4app (no te preocupes, es gratis registrarse) y Flutter instalado en tu máquina. Si eres nuevo en Flutter, consulta su guía de instalación. Oh, y tener un conocimiento básico de Dart y widgets de Flutter ayudará, pero te guiaremos a través de las partes complicadas.
Paso 1 – Configurando tu backend de Back4app
Vamos a configurar nuestro backend de Back4app. ¡No te preocupes, no es tan intimidante como suena!
Primero, inicia sesión en tu cuenta de Back4app. ¿No tienes cuenta? ¡No hay problema! Dirígete a Back4app.com y regístrate: es gratis y rápido.
Crea un nuevo proyecto de backend. Puedes nombrarlo algo ingenioso como 'AwesomeDropdownData' o simplemente optar por 'DropdownExample' si hoy no te sientes muy creativo.
Ahora, vamos a crear una Clase Parse. Piensa en ella como una tabla especial para nuestras opciones de menú desplegable. La llamaremos 'Options' (imaginativo, ¿verdad?). Agrega una columna llamada optionValue (String) para almacenar nuestras elecciones de menú desplegable.
¡Es hora de agregar algunos datos de muestra! Vamos a poblar nuestra clase 'Options' con algunos deliciosos ingredientes de pizza:
Pepperoni
Champiñones
Queso Extra
Por último, pero no menos importante, obtén tu ID de aplicación y clave de cliente de la configuración de tu proyecto. Necesitaremos estos para conectar nuestra aplicación Flutter a Back4app.
Paso 2 – Configurando el proyecto Flutter
Vamos a crear un nuevo proyecto de Flutter. Abre tu terminal, encuentra un lugar acogedor para tu proyecto y ejecuta:
Bash
flutter create dropdown_example
flutter create dropdown_example
﻿
Ahora, agreguemos algunas dependencias. Abre pubspec.yaml y añade estas líneas:
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
﻿
¡No olvides ejecutar flutter pub get para obtener estos paquetes!
Ahora, digamos a nuestra aplicación Flutter cómo hablar con Back4app. Abre lib/main.dart y añade este código. ¡No te preocupes si parece un poco intimidante – lo desglosaremos!
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(),
    );
  }
}
﻿
Recuerda reemplazar 'YOUR_BACK4APP_APP_ID' y 'YOUR_BACK4APP_CLIENT_KEY' con tus credenciales reales de Back4app. ¡Estos son como el apretón de manos secreto entre tu aplicación y Back4app!
Paso 3 – Construyendo el Menú Desplegable
¡Ahora viene la parte divertida – vamos a crear nuestro menú desplegable!
Aquí está el código para nuestro DropdownMenuScreen widget. Puede parecer mucho, pero lo desglosaremos, ¡lo prometo!
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!;
                  });
                },
              ),
            ),
    );
  }
}
﻿
¡Uf, eso es un buen trozo de código! Pero no te asustes – vamos a desglosarlo pieza por pieza. Este widget está haciendo algunas cosas clave por nosotros:
Está accediendo a nuestro backend de Back4app y obteniendo nuestra lista de opciones. Piensa en ello como un camarero trayéndote el menú en un restaurante.
Mientras está obteniendo, muestra un indicador de carga. Porque a nadie le gusta mirar una pantalla en blanco, ¿verdad?
Una vez que tiene las opciones, las muestra en un bonito menú desplegable.
Cuando eliges una opción, recuerda tu elección.
¿Genial, verdad? Y la mejor parte es que, cada vez que actualizas las opciones en Back4app, tu aplicación mostrará automáticamente la nueva lista la próxima vez que se cargue. ¡Magia!
Paso 4 – Ejecutando la Aplicación
¡Es hora del momento de la verdad! Ejecuta tu aplicación usando flutter run. Si todo va bien, deberías ver un menú desplegable poblado con los ingredientes de pizza que almacenamos en Back4app.
Adelante, selecciona un ingrediente. ¿Notas cómo se actualiza al instante? ¡Ese es el poder de la gestión de estado en Flutter!
Mejores Prácticas para Menús Desplegables con Integración de Backend
Manejar Estados de Carga: Como viste en nuestro ejemplo, usamos un indicador de carga mientras obtenemos datos. Es como poner música mientras tus invitados esperan la cena: ¡simplemente mejora la experiencia!
Manejo de Errores: En una aplicación del mundo real, querrías agregar algún manejo de errores. ¿Qué pasa si se cae el internet? ¿O si Back4app está tomando una siesta? ¡Siempre planifica lo inesperado!
Usar Paginación: Si tu lista desplegable crece más que la lista de ingredientes en una pizza estilo Chicago, considera implementar paginación. Tus usuarios (y sus dispositivos) te lo agradecerán.
Conclusión
¡Acabas de construir un menú desplegable inteligente, potenciado por backend en Flutter! 🎉 ¿Por qué no intentas extender este ejemplo? Tal vez agregar un botón que añada el ingrediente seleccionado a un pedido de pizza, o intenta mostrar las opciones en un componente de UI diferente. ¡El cielo es el límite!
Y recuerda, si te quedas atascado o tienes preguntas, las comunidades de Flutter y Back4app son muy útiles. ¡No seas tímido al pedir ayuda!
¡Ahora avanza y construye UIs dinámicas y asombrosas! 💪
Para más información, consulta la documentación de Flutter y documentación de Back4app. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo usar Uint8List en Flutter y persistirlo en el backend utilizando Back4app
Flutter, Google Wallet y Back4App: Tutorial de aplicación de recompensas ambientales