Fase 0 · Requisitos Fase 1 · Proyecto y assets Fase 2 · Modelo y backend Fase 3 · Componentes Fase 4 · Pantallas ✅ Checklist

📱 TALLER INDIVIDUAL · ADSO · FASE 1 DE 5

Crear el proyecto y
la carpeta de assets

Del proyecto vacío a tener la estructura base lista: creación del proyecto, limpieza de main.dart, carpetas de lib/ y configuración de assets en pubspec.yaml.

📅 Sesión del 27 de julio de 2026

☕ ecommer_app

🔒 Código protegido, solo lectura

🔒

Código de solo lectura: no se puede seleccionar, copiar ni pegar (tampoco desde el inspector del navegador). Debes escribirlo tú mismo, línea por línea, en tu editor.

En cada paso encontrarás: 💻 Código 🧪 Prueba 🔒 Sin copiar

📚 Antes de programar: ¿qué es un componente (Widget) en Flutter?

En Flutter todo lo que ves en pantalla es un Widget: un texto, un botón, un espacio, un ícono, incluso la pantalla completa. Un componente no es más que un Widget que tú mismo construyes combinando otros widgets más pequeños, para no repetir el mismo código una y otra vez.

Existen dos tipos principales:

StatelessWidget: se dibuja una vez y no cambia por sí solo. Ejemplo: TopBar.
StatefulWidget: puede recordar y cambiar su propia información con el tiempo. Ejemplo: CategorySelector, que recuerda cuál categoría está seleccionada.

Por eso el proyecto tiene una carpeta widgets/: TopBar, SearchBarWithFilter, CategorySelector y ProductCard son piezas independientes que luego se ensamblan, como bloques de Lego, dentro de pages/menu.dart. Con esto claro, empezamos a escribir el código.

FASE 1

Crear el proyecto y la carpeta de assets

PASO 1

Crear el proyecto Flutter

🔒 Sin copiar

Abre una terminal en la carpeta donde quieras guardar tus proyectos y ejecuta:

flutter create ecommer_app

Entra a la carpeta creada y ábrela en tu editor:

cd ecommer_app

code .

🧪 Prueba este paso

Ejecuta flutter run (o el botón ▶ de tu editor). Debe abrir el emulador y mostrar la app de ejemplo de Flutter con un contador. Si eso funciona, el proyecto quedó bien creado.

🗂️

Así debe quedar tu proyecto al final de esta sesión

🧪 Prueba

Este es el mapa de llegada: úsalo como referencia en los siguientes pasos para saber qué falta por crear dentro de ecommer_app.

ecommer_app/ ├── assets/ │ └── img/ │ └── fondo.avif ├── lib/ │ ├── models/ │ │ └── product.dart │ ├── services/ │ │ ├── api_config.dart │ │ └── product_service.dart │ ├── widgets/ │ │ ├── top_bar.dart │ │ ├── search_bar_with_filter.dart │ │ ├── category_selector.dart │ │ └── product_card.dart │ ├── pages/ │ │ ├── home.dart │ │ └── menu.dart │ └── main.dart └── pubspec.yaml

PASO 2

Dejar main.dart limpio

💻 Código

Borra todo el contenido de lib/main.dart y deja solo esta base temporal:

            dart🔒
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color(0xFF181513),
        body: const Center(
          child: Text(
            'Hola Café Místico',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      ),
    );
  }
}
          

🧪 Prueba este paso

Guarda y ejecuta de nuevo (hot restart). Debe verse una pantalla oscura con el texto "Hola Café Místico" centrado.

PASO 3

Crear la estructura de carpetas

🔒 Sin copiar

Dentro de lib/, crea (clic derecho → New → Directory) estas cuatro carpetas:

lib/ ├── models/ ├── services/ ├── widgets/ └── pages/

Ahora, en la raíz del proyecto (al mismo nivel que lib/, no adentro), crea la carpeta de imágenes:

assets/ └── img/

🧪 Prueba este paso

Revisa en el árbol de archivos de tu editor que las 4 carpetas dentro de lib/ y la carpeta assets/img/ existan exactamente con esos nombres, en minúscula.

PASO 4

Configurar assets en pubspec.yaml

💻 Código

Abre pubspec.yaml y agrega la dependencia http (respeta la indentación con espacios, nunca con tabulaciones):

            yaml🔒
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
          

Más abajo, en la sección flutter:, declara la carpeta de assets:

            yaml🔒
flutter:
  uses-material-design: true
  assets:
    - assets/img/
          

Guarda el archivo y descarga los paquetes:

flutter pub get

🧪 Prueba este paso

Coloca cualquier imagen dentro de assets/img/ con el nombre fondo.avif. Reemplaza temporalmente el Text del Center en main.dart por Image.asset('assets/img/fondo.avif') y corre la app. Si la imagen aparece (sin el error rojo "Unable to load asset"), quedó bien configurada. Luego deja el Text de vuelta.

← Fase 0 · Requisitos Siguiente: Fase 2 · Modelo y backend →

Crear el proyecto yla carpeta de assets

Crear el proyecto y
la carpeta de assets