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

Construcción de una Aplicación Simple en Flutter

Siguiente ►
►

En este tema, aprenderemos a construir una aplicación simple en Flutter, el framework de UI de Google para crear aplicaciones nativas para móviles, web y escritorio desde una única base de código. Este módulo te guiará a través de los pasos necesarios para configurar un proyecto de Flutter y desarrollar una aplicación básica.

Objetivos del Tema

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

Requisitos Previos

  1. Configuración del Proyecto de Flutter

Paso 1: Crear un Nuevo Proyecto de Flutter

Abre tu terminal o línea de comandos y ejecuta el siguiente comando para crear un nuevo proyecto de Flutter:

flutter create my_first_flutter_app

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

Paso 2: Navegar al Directorio del Proyecto

Cambia al directorio del proyecto recién creado:

cd my_first_flutter_app

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

Abre el proyecto en tu editor de código preferido (por ejemplo, Visual Studio Code):

code .

  1. Estructura Básica de una Aplicación Flutter

Una aplicación Flutter típica tiene la siguiente estructura de directorios:

my_first_flutter_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
└── README.md
  • android/ y ios/: Contienen los archivos específicos de la plataforma.
  • lib/: Contiene el código fuente de la aplicación. El archivo principal es main.dart.
  • test/: Contiene los archivos de prueba.
  • pubspec.yaml: Archivo de configuración del proyecto.

  1. Creación de una Interfaz de Usuario Simple

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Explicación del Código

  • main(): La función principal que ejecuta la aplicación.
  • MyApp: Un widget sin estado que configura el tema y la página principal de la aplicación.
  • MyHomePage: Un widget con estado que muestra un contador y un botón para incrementarlo.
  • _incrementCounter(): Método que incrementa el contador y actualiza la UI.

  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 la terminal, ejecuta el siguiente comando para iniciar la aplicación:

flutter run

Esto compilará y ejecutará la aplicación en el emulador o dispositivo conectado.

Ejercicio Práctico

Ejercicio 1: Modificar el Texto del Contador

Modifica el texto que se muestra en la aplicación para que diga "Has presionado el botón X veces", donde X es el valor del contador.

Solución

Reemplaza el texto en el widget Text dentro del método build de _MyHomePageState:

Text(
  'Has presionado el botón $_counter veces:',
),

Ejercicio 2: Cambiar el Color del Botón

Cambia el color del FloatingActionButton a rojo.

Solución

Modifica el widget FloatingActionButton para incluir la propiedad backgroundColor:

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: Icon(Icons.add),
  backgroundColor: Colors.red,
),

Conclusión

En este tema, hemos aprendido a configurar un proyecto de Flutter, comprender la estructura básica de una aplicación Flutter, crear una interfaz de usuario simple y ejecutar la aplicación en un emulador o dispositivo físico. Estos conocimientos te preparan para explorar más características avanzadas de Flutter y desarrollar aplicaciones más complejas.

En el siguiente tema, exploraremos cómo utilizar Dart para el desarrollo web. ¡Sigue adelante y sigue practicando!

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