Curso App restaurant con pedidos en Flutter
Creación del proyecto y recursos necesarios para el desarrollo
En esta lección, aprenderemos a crear el proyecto de Flutter desde cero, establecer una estructura de carpetas organizada, agregar los paquetes necesarios y gestionar recursos como la carga de imágenes. Estos fundamentos son esenciales para mantener un código limpio, modular y fácil
¡Excelente! Continuemos con la Lección 2 del curso "App Restaurant en Flutter". En esta lección, abordaremos la creación del proyecto utilizando Android Studio, la estructura de carpetas recomendada para mantener el código organizado, la incorporación de paquetes esenciales como http
, provider
y url_launcher
, y la gestión de recursos, específicamente la carga de imágenes.
Paso a Paso para Crear un Proyecto Flutter en Android Studio:
Instalar Android Studio:
Configurar Flutter en Android Studio:
Crear un Nuevo Proyecto Flutter:
app_restaurant
com.tuempresa.apprestaurant
.Estructura Inicial del Proyecto:
lib
, android
, ios
, etc.lib
, donde reside la mayor parte del código Dart.Mantener una estructura de carpetas organizada es crucial para la escalabilidad y el mantenimiento del proyecto. A continuación, se presenta una estructura recomendada para nuestra aplicación de restaurante:
lib/ │ ├── models/ │ └── menu_item.dart │ ├── providers/ │ └── menu_provider.dart │ ├── services/ │ └── api_service.dart │ ├── widgets/ │ └── menu_item_widget.dart │ ├── utils/ │ └── constants.dart │ └── main.dart
Descripción de Cada Carpeta:
models:
menu_item.dart
define la estructura de un elemento del menú.providers:
menu_provider.dart
maneja la lista de elementos del menú y su estado.services:
api_service.dart
maneja las solicitudes HTTP para obtener datos del menú.widgets:
menu_item_widget.dart
muestra la representación visual de un elemento del menú.utils:
constants.dart
define colores, estilos de texto y otras constantes.main.dart:
http
, provider
y url_launcher
Para ampliar las funcionalidades de nuestra aplicación, utilizaremos algunos paquetes esenciales. A continuación, se explica cómo incorporarlos y utilizarlos.
3.1. Agregar Dependencias en pubspec.yaml
:
Abre el archivo pubspec.yaml
y agrega las siguientes dependencias bajo la sección dependencies
:
yamldependencies: flutter: sdk: flutter provider: ^6.0.0 http: ^0.13.5 url_launcher: ^6.1.7
Nota: Asegúrate de verificar las versiones más recientes de los paquetes en pub.dev y ajusta las versiones según sea necesario.
3.2. Instalar las Dependencias:
Después de agregar las dependencias, ejecuta el siguiente comando en la terminal para instalarlas:
bash
flutter pub get
La gestión eficiente de imágenes es esencial para una aplicación atractiva y de buen rendimiento. A continuación, se explica cómo cargar imágenes desde activos locales y desde la web.
4.1. Cargar Imágenes desde Activos Locales
Agregar Imágenes al Proyecto:
assets/images
en la raíz de tu proyecto.Declarar los Activos en pubspec.yaml
:
Abre pubspec.yaml
y agrega la ruta de los activos:
yaml
flutter: assets: - assets/images/
2808 visitas
« Capítulo 1 – Planteamiento del Proyecto
Capítulo 3 – API REST en Laravel para Obtener JSON »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024