Saltar al contenido principal

Configurar tu proyecto

Instrucciones sobre cómo crear una nueva app de Flutter.

Previsualiza la aplicación lectora de Wikipedia que vas a construir y configura el proyecto inicial con los paquetes requeridos.

Qué lograrás

Previsualizar la aplicación lectora de Wikipedia que vas a construir
Añadir paquetes para manejar solicitudes HTTP y datos de Wikipedia
Configurar la estructura del proyecto inicial

Pasos

1

Introducción

En las próximas lecciones, aprenderás a trabajar con datos en una aplicación Flutter. Construirás una app que obtiene y muestra resúmenes de artículos de la API de Wikipedia.

Una captura de pantalla de la aplicación lectora de Wikipedia completada que muestra
un artículo con imagen, título, descripción y texto de extracto.

Estas lecciones exploran:

  • Realizar solicitudes HTTP en Flutter.
  • Administrar el State de la aplicación con ChangeNotifier.
  • Usar el patrón de arquitectura MVVM.
  • Crear interfaces de usuario responsivas que se actualizan automáticamente cuando los datos cambian.

Este tutorial asume que has completado los tutoriales Primeros pasos con Dart y el de Introducción a la UI de Flutter, y por lo tanto no explica conceptos como HTTP, JSON o los aspectos básicos de los widgets.

2

Crear un nuevo proyecto Flutter

Crea un nuevo proyecto Flutter utilizando la CLI de Flutter. En tu terminal preferida, ejecuta el siguiente comando para crear una aplicación Flutter mínima:

flutter create wikipedia_reader --empty
3

Añadir las dependencias requeridas

Tu aplicación necesita el paquete http para realizar solicitudes HTTP. Añádelo a tu proyecto:

cd wikipedia_reader && flutter pub add http
4

Examinar el código inicial

Primero, crea un nuevo archivo lib/summary.dart para definir el modelo de datos para los resúmenes de artículos de Wikipedia. Este archivo no tiene lógica especial y es simplemente una colección de clases que representan los datos devueltos por la API de Wikipedia. Es suficiente con copiar el código a continuación en el archivo y luego ignorarlo. Si no te sientes cómodo con las clases básicas de Dart, deberías leer el tutorial Primeros pasos con Dart primero.

Luego, abre lib/main.dart y reemplaza el código existente con esta estructura básica, que añade las importaciones requeridas que utiliza la aplicación:

lib/main.dart
dart
import 'dart:convert';
import 'dart:io';

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

import 'summary.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Wikipedia Flutter')),
        body: const Center(child: Text('Loading...')),
      ),
    );
  }
}

Este código proporciona una estructura de aplicación básica con una barra de título y contenido de marcador de posición. Las importaciones en la parte superior incluyen todo lo necesario para solicitudes HTTP, análisis de JSON y el modelo de datos de Wikipedia.

5

Ejecutar tu aplicación

Prueba que todo funcione ejecutando tu aplicación:

flutter run -d chrome

Deberías ver una aplicación sencilla con "Wikipedia Flutter" en la barra de la aplicación (app bar) y "Loading..." en el centro de la pantalla.

6

Revisión

Qué lograste

Aquí tienes un resumen de lo que construiste y aprendiste en esta lección.
Previsualicé la aplicación lectora de Wikipedia

Estás comenzando una nueva sección de tutorial enfocada en trabajar con datos. Aprenderás sobre solicitudes HTTP, State Management con ChangeNotifier y el patrón de arquitectura MVVM.

Añadí el paquete http y creé un modelo de datos

Utilizaste flutter pub add para instalar el paquete http para realizar solicitudes HTTP y creaste la clase Summary para los datos de Wikipedia. Los paquetes te permiten aprovechar el código existente construido por la comunidad en lugar de construir todo desde cero.

Configuré la estructura del proyecto inicial

Tu aplicación tiene la estructura básica con todas las importaciones necesarias para solicitudes HTTP, análisis de JSON y datos de Wikipedia. ¡Estás listo para comenzar a obtener datos reales de la API de Wikipedia!

7

Ponte a prueba

Quiz de configuración del proyecto

1 / 2
What does the --empty flag do when running flutter create?
  1. Crea un proyecto que solo se puede ejecutar en la web.

    No exactamente.

    El flag no restringe las plataformas; solo afecta a la plantilla de inicio.

  2. Crea un proyecto Flutter mínimo con menos código boilerplate (de plantilla).

    ¡Así es!

    El flag --empty genera una plantilla de inicio mínima sin la aplicación de contador por defecto.

  3. Crea un proyecto sin dependencias.

    No exactamente.

    El proyecto aún incluye las dependencias principales de Flutter.

  4. Crea un proyecto sin ningún archivo en absoluto.

    No exactamente.

    El proyecto aún tiene los archivos esenciales; solo utiliza una plantilla mínima.

What command is used to add a package dependency to a Flutter project?
  1. flutter package install [package_name]

    No exactamente.

    No existe el comando flutter package; utiliza flutter pub add.

  2. flutter pub add [package_name]

    ¡Así es!

    Ejecutar flutter pub add añade el paquete a pubspec.yaml y lo descarga.

  3. dart get [package_name]

    No exactamente.

    El comando para añadir paquetes es flutter pub add o editar pubspec.yaml.

  4. flutter install [package_name]

    No exactamente.

    El comando correcto utiliza pub add, no install.