➜ Configuración y Estructura del Proyecto

¡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.

1. Creación del Proyecto con Android Studio

Paso a Paso para Crear un Proyecto Flutter en Android Studio:

1. Instalar Android Studio:

   • Asegúrate de tener Android Studio instalado en tu máquina.
   • Durante la instalación, selecciona los componentes necesarios para el desarrollo de Flutter, incluyendo el SDK de Flutter y Dart.

2. Configurar Flutter en Android Studio:

   • Abre Android Studio.
   • Ve a File > Settings > Plugins (en Windows/Linux) o Android Studio > Preferences > Plugins (en macOS).
   • Busca e instala los plugins de Flutter y Dart.
   • Reinicia Android Studio si es necesario.

3. Crear un Nuevo Proyecto Flutter:

   • En la pantalla de bienvenida, selecciona "New Flutter Project".
   • Elige "Flutter Application" y haz clic en "Next".
   • Configura los siguientes detalles:
     • Project Name: app_restaurant
     • Flutter SDK Path: Asegúrate de que apunte al directorio donde instalaste Flutter.
     • Description: Una breve descripción de tu proyecto.
     • Package Name: Por ejemplo, com.tuempresa.apprestaurant.
     • Project Location: Elige la carpeta donde deseas crear el proyecto.
   • Haz clic en "Finish" y espera a que Android Studio configure el proyecto.

4. Estructura Inicial del Proyecto:

   • Una vez creado, verás una estructura básica con carpetas como lib, android, ios, etc.
   • Nos enfocaremos en la carpeta lib, donde reside la mayor parte del código Dart.

2. Estructura de Carpetas

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:

1. models:

   • Propósito: Definir las clases que representan los datos de la aplicación.
   • Ejemplo: menu_item.dart define la estructura de un elemento del menú.

2. providers:

   • Propósito: Gestionar el estado utilizando la arquitectura Provider.
   • Ejemplo: menu_provider.dart maneja la lista de elementos del menú y su estado.

3. services:

   • Propósito: Interactuar con servicios externos como APIs, bases de datos, etc.
   • Ejemplo: api_service.dart maneja las solicitudes HTTP para obtener datos del menú.

4. widgets:

   • Propósito: Crear componentes reutilizables que se utilizan en diferentes partes de la aplicación.
   • Ejemplo: menu_item_widget.dart muestra la representación visual de un elemento del menú.

5. utils:

   • Propósito: Almacenar utilidades y constantes que se utilizan en toda la aplicación.
   • Ejemplo: constants.dart define colores, estilos de texto y otras constantes.

6. main.dart:

   • Propósito: Punto de entrada de la aplicación donde se configura el Provider y se define la estructura inicial.

3. Paquetes: 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:

yaml

dependencies:
  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

4. Recursos: Carga de Imágenes

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

1. Agregar Imágenes al Proyecto:

   • Crea una carpeta llamada assets/images en la raíz de tu proyecto.
   • Coloca todas las imágenes que utilizarás en esta carpeta.

2. Declarar los Activos en pubspec.yaml:

   Abre pubspec.yaml y agrega la ruta de los activos:

   yaml
   
   flutter: assets: - assets/images/