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

Introducción a Flutter

Siguiente ►
►

Flutter es un framework de código abierto desarrollado por Google para crear aplicaciones nativas de alta calidad para iOS, Android, web y escritorio desde una única base de código. Utiliza el lenguaje de programación Dart y proporciona una rica colección de widgets y herramientas que permiten a los desarrolladores crear interfaces de usuario atractivas y funcionales.

Objetivos de esta lección

  • Comprender qué es Flutter y sus ventajas.
  • Conocer la arquitectura de Flutter.
  • Configurar el entorno de desarrollo para Flutter.
  • Crear y ejecutar una aplicación simple en Flutter.

¿Qué es Flutter?

Flutter es un SDK (Software Development Kit) que permite a los desarrolladores crear aplicaciones nativas para múltiples plataformas utilizando una única base de código. Algunas de las características clave de Flutter incluyen:

  • Rendimiento Nativo: Flutter compila directamente a código nativo, lo que permite un rendimiento cercano al nativo.
  • Hot Reload: Permite a los desarrolladores ver los cambios en el código en tiempo real sin necesidad de reiniciar la aplicación.
  • Widgets Personalizables: Flutter proporciona una amplia gama de widgets personalizables que facilitan la creación de interfaces de usuario atractivas y responsivas.
  • Soporte Multiplataforma: Con Flutter, puedes desarrollar aplicaciones para iOS, Android, web y escritorio desde una única base de código.

Arquitectura de Flutter

La arquitectura de Flutter se basa en tres componentes principales:

  1. Framework: Proporciona una rica colección de widgets y herramientas para construir interfaces de usuario. Está escrito en Dart y se divide en varias capas, como Material, Cupertino, Widgets, Rendering, y Foundation.

  2. Engine: Escrito en C++, el motor de Flutter proporciona soporte de bajo nivel para renderizado, animaciones, gráficos 2D, y más. Utiliza Skia como motor de renderizado.

  3. Embedder: Permite que Flutter se ejecute en diferentes plataformas. El embedder se encarga de la integración con el sistema operativo, la gestión de ventanas, y la entrada de usuario.

Configuración del Entorno de Desarrollo

Para empezar a desarrollar con Flutter, necesitas configurar tu entorno de desarrollo. Sigue estos pasos:

  1. Instalar Flutter SDK:

    • Descarga el SDK de Flutter desde flutter.dev.
    • Extrae el archivo descargado y agrega la ruta flutter/bin a tu variable de entorno PATH.

  2. Instalar un Editor de Código:

    • Se recomienda usar Visual Studio Code o Android Studio. Ambos tienen excelentes plugins para Flutter.

  3. Configurar el Editor:

    • Si usas Visual Studio Code, instala la extensión "Flutter" desde el marketplace.
    • Si usas Android Studio, instala el plugin "Flutter" desde la configuración de plugins.

  4. Verificar la Instalación:

    • Abre una terminal y ejecuta flutter doctor. Este comando verificará la instalación y te informará si falta algún componente.

Tu Primera Aplicación en Flutter

Vamos a crear una aplicación simple en Flutter para entender cómo funciona.

Paso 1: Crear un Nuevo Proyecto

Abre una terminal y ejecuta el siguiente comando para crear un nuevo proyecto de Flutter:

flutter create my_first_app

Paso 2: Navegar al Directorio del Proyecto

cd my_first_app

Paso 3: Ejecutar la Aplicación

Para ejecutar la aplicación, asegúrate de tener un emulador o un dispositivo físico conectado. Luego, ejecuta:

flutter run

Estructura del Proyecto

La estructura básica de un proyecto de Flutter es la siguiente:

my_first_app/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml
└── README.md
  • android/ y ios/: Contienen el código específico de la plataforma.
  • lib/: Contiene el código fuente de la aplicación. El archivo principal es main.dart.
  • test/: Contiene las pruebas unitarias y de integración.
  • pubspec.yaml: Archivo de configuración del proyecto, donde se definen las dependencias y otros metadatos.

Código de Ejemplo

Vamos a modificar el archivo lib/main.dart para crear una aplicación simple que muestre "Hello, Flutter!".

import 'package:flutter/material.dart';

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

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

Explicación del Código

  • import 'package:flutter/material.dart';: Importa el paquete de Material Design de Flutter.
  • void main() { runApp(MyApp()); }: La función main es el punto de entrada de la aplicación. runApp inicia la aplicación y toma un widget como argumento.
  • MyApp: Es un widget sin estado (StatelessWidget) que representa la aplicación.
  • MaterialApp: Es un widget que envuelve la aplicación y proporciona funcionalidades de Material Design.
  • Scaffold: Proporciona una estructura básica para la aplicación, incluyendo una barra de aplicaciones (AppBar) y un cuerpo (body).
  • Center: Centra su hijo en el medio del widget.
  • Text: Muestra un texto en la pantalla.

Ejercicio Práctico

Ejercicio 1: Modificar el Texto

Modifica el texto que se muestra en la aplicación para que diga "Welcome to Flutter!".

Solución

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Welcome to Flutter!'),
        ),
      ),
    );
  }
}

Ejercicio 2: Cambiar el Color de Fondo

Cambia el color de fondo de la aplicación a azul claro.

Solución

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Welcome to Flutter!'),
        ),
        backgroundColor: Colors.lightBlue,
      ),
    );
  }
}

Conclusión

En esta lección, hemos introducido Flutter, configurado el entorno de desarrollo y creado una aplicación simple. Ahora tienes una comprensión básica de cómo funciona Flutter y cómo puedes empezar a desarrollar aplicaciones con él. En las próximas lecciones, profundizaremos en los widgets y las funcionalidades avanzadas de Flutter para crear aplicaciones más complejas y funcionales.

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