Cómo crear una app de pedidos en Flutter para tu emprendimiento en 1 día

Si tienes un emprendimiento y necesitas una app móvil para que tus clientes pidan productos o servicios sin depender de un equipo de desarrollo grande, Flutter es tu mejor opción. En este tutorial construiremos una app básica de pedidos que puedes personalizar según tus necesidades. No necesitas experiencia previa en Flutter, solo ganas de aprender y paciencia para seguir los pasos.

Configurar el entorno de desarrollo

Antes de empezar, asegúrate de tener instalado Flutter SDK, Android Studio o VS Code con la extensión de Flutter, y un emulador o dispositivo físico conectado. También necesitas tener configurado tu PATH del sistema para ejecutar comandos desde la terminal. Si estás en Windows, verifica que las variables de entorno incluyan la carpeta de Flutter. En macOS o Linux, añade la ruta al archivo .bashrc o .zshrc.

1. Instalar Flutter SDK: Descarga el archivo comprimido desde flutter.dev, descomprímelo en una carpeta y agrega su bin a las variables de entorno. Ejecuta flutter doctor para verificar que todo esté correcto.
2. Crear el proyecto: Abre la terminal y ejecuta flutter create nombre_app. Reemplaza nombre_app por el nombre de tu proyecto, por ejemplo pedidos_app. Entra en la carpeta con cd pedidos_app.
3. Abrir el proyecto en VS Code: Ejecuta code . desde la carpeta del proyecto. Instala las extensiones recomendadas de Flutter y Dart si es necesario.
4. Eliminar el código de ejemplo: Borra todo el contenido dentro de lib/main.dart y reemplázalo con el código base que mostrarás a continuación.

Estructura básica de la app de pedidos

Vamos a crear una app con tres pantallas principales: lista de productos, carrito de compras y pantalla de checkout. Necesitamos estructurar nuestro proyecto en carpetas para mantener el código ordenado. Crea las siguientes carpetas dentro de lib/: models, screens, widgets y services. El modelo de producto será simple: nombre, precio, imagen y cantidad. El carrito será una lista que maneja el estado de los productos seleccionados.

1. Definir el modelo de Producto: Crea un archivo lib/models/producto.dart con una clase que tenga propiedades nombre, precio, imagen y cantidad. Usa ChangeNotifier para que la app pueda notificar cambios cuando se agregue o quite un producto del carrito.
2. Crear la pantalla de productos: En lib/screens/listado_productos.dart, muestra una ListView con tarjetas de productos usando un GridView o ListView.builder. Cada tarjeta debe tener un botón Agregar al carrito que llame al método del modelo.
3. Implementar el carrito: Crea lib/screens/carrito.dart que muestre los productos agregados con sus cantidades y precios totales. Usa un Consumer para escuchar los cambios del modelo.
4. Crear la pantalla de checkout: En lib/screens/checkout.dart, muestra un formulario simple con nombre, teléfono y dirección. Al enviar, muestra un mensaje de confirmación y limpia el carrito.

Ejemplo concreto: app de pedidos de comida rápida

Imagina que tienes un local de hamburguesas y quieres que tus clientes pedan desde su móvil. Crea una lista fija de productos: hamburguesa clásica $5.000, papas fritas $2.500, refresco $1.500. Usa imágenes locales en la carpeta assets/images/ y declara esas rutas en pubspec.yaml. La app mostrará estos productos, el cliente podrá agregar cantidades, revisar el total y confirmar el pedido. Al finalizar, puedes conectar esta app a un sistema de gestión de pedidos como WhatsApp o Google Sheets usando un webhook.

Errores frecuentes que debes evitar:

• No declarar las imágenes en pubspec.yaml genera errores en tiempo de ejecución.
• Olvidar conectar el dispositivo con flutter devices hace que no puedas probar la app.
• No usar setState o Provider correctamente puede causar que los cambios no se muestren.
• Ignorar el responsive design hace que la app se vea mal en diferentes tamaños de pantalla.

Una vez que tengas la app funcionando, el siguiente paso es publicarla en Google Play o App Store. Flutter permite generar APKs o AABs con el comando flutter build apk o flutter build appbundle. También puedes agregar pagos por adelantado usando Stripe o PayPal mediante sus APIs oficiales.