El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Creando Tu Primera App con Flutter

Siguiente ►
►

En esta sección, aprenderás a crear tu primera aplicación con Flutter. Este proceso te ayudará a familiarizarte con la estructura básica de una aplicación Flutter y a entender cómo funcionan los widgets, que son los bloques de construcción fundamentales en Flutter.

Objetivos

  • Configurar un nuevo proyecto Flutter.
  • Comprender la estructura de un proyecto Flutter.
  • Crear una interfaz de usuario básica.
  • Ejecutar la aplicación en un emulador o dispositivo físico.

  1. Configuración de un Nuevo Proyecto Flutter

Paso 1: Crear el Proyecto

Abre tu terminal o línea de comandos y navega hasta el directorio donde deseas crear tu proyecto. Luego, ejecuta el siguiente comando:

flutter create my_first_app

Este comando creará una nueva carpeta llamada my_first_app con la estructura básica de un proyecto Flutter.

Paso 2: Abrir el Proyecto en tu Editor de Código

Abre tu editor de código preferido (como Visual Studio Code o Android Studio) y carga el proyecto my_first_app.

  1. Estructura de un Proyecto Flutter

Una vez que hayas abierto el proyecto, verás una estructura de carpetas y archivos similar a la siguiente:

my_first_app/
├── android/
├── build/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── .gitignore
├── pubspec.yaml
└── README.md

Descripción de las Carpetas y Archivos Principales

  • android/: Contiene el código específico para la plataforma Android.
  • ios/: Contiene el código específico para la plataforma iOS.
  • lib/: Contiene el código fuente de la aplicación. Aquí es donde escribirás la mayor parte de tu código Dart.
  • main.dart: El punto de entrada de la aplicación.
  • pubspec.yaml: Archivo de configuración del proyecto, donde se especifican las dependencias y otros ajustes.

  1. Creando la Interfaz de Usuario Básica

Paso 1: Editar main.dart

Abre el archivo lib/main.dart y reemplaza su contenido con el siguiente código:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

Explicación del Código

  • main(): La función principal que ejecuta la aplicación. Llama a runApp() y pasa una instancia de MyApp.
  • MyApp: Un widget sin estado (StatelessWidget) que representa la aplicación. Configura el tema y la página de inicio.
  • MyHomePage: Otro widget sin estado que representa la página de inicio. Utiliza un Scaffold para estructurar la página con una barra de aplicaciones (AppBar) y un cuerpo (body) que contiene un texto centrado.

  1. Ejecutar la Aplicación

Paso 1: Iniciar un Emulador o Conectar un Dispositivo

Asegúrate de tener un emulador de Android o iOS en ejecución, o conecta un dispositivo físico a tu computadora.

Paso 2: Ejecutar la Aplicación

En tu terminal, navega hasta el directorio del proyecto y ejecuta el siguiente comando:

flutter run

Esto compilará y ejecutará la aplicación en el emulador o dispositivo conectado. Deberías ver una pantalla con una barra de aplicaciones que dice "Home Page" y un texto centrado que dice "Hello, Flutter!".

Ejercicio Práctico

Ejercicio 1: Modificar el Texto

Modifica el texto que se muestra en la pantalla de "Hello, Flutter!" a "Welcome to My First App!".

Solución

Abre lib/main.dart y cambia la línea:

child: Text('Hello, Flutter!'),

a:

child: Text('Welcome to My First App!'),

Guarda el archivo y vuelve a ejecutar la aplicación para ver los cambios.

Conclusión

En esta sección, has aprendido a crear tu primera aplicación Flutter, comprendiendo la estructura básica del proyecto y creando una interfaz de usuario simple. Ahora estás listo para explorar más sobre Flutter y construir aplicaciones más complejas.

En el próximo módulo, profundizaremos en los conceptos básicos de programación en Dart, el lenguaje de programación utilizado por Flutter.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados