Introducción a Flutter

Paso 1: Instalación del SDK de Flutter

1.1 Descargar el SDK de Flutter

1. Visita el sitio web oficial de Flutter .
2. Descargue la última versión estable para su sistema operativo (Windows, macOS o Linux).

1.2 Extraer y agregar a PATH

• Windows : extraiga el archivo ZIP descargado en C:\flutter(o en un directorio de su elección).
• macOS/Linux : extraiga el archivo TAR descargado a su directorio de inicio o /opt.

Agregue el directorio bin de Flutter a la RUTA de su sistema:

windows:

setx RUTA "%RUTA%;C:\flutter\bin"

macOS/Linux (agregue esto a .zshrc o .bashrc)

exportar PATH= " $PATH :/ruta-a-flutter/bin"

1.3 Verificar la instalación

Ejecute el siguiente comando en su terminal para verificar la instalación:

Doctor aleteo

El resultado mostrará el estado de la instalación y las dependencias de Flutter. Instale las dependencias faltantes según las instrucciones.

Paso 2: Configuración de un IDE

Flutter funciona perfectamente con IDE populares como Visual Studio Code y Android Studio .

2.1 Código de Visual Studio

1. Instalar VS Code .
2. Abra VS Code y navegue hasta Extensions(Ctrl+Shift+X o Cmd+Shift+X).
3. Busque e instale las siguientes extensiones:

• Flutter : proporciona soporte para Flutter.
• Dart : necesario para el desarrollo de Flutter.

2.2 Estudio Android

1. Instalar Android Studio .
2. Abra Android Studio y navegue hasta Settings> Plugins.
3. Buscar e instalar:

• Complemento Flutter .
• Complemento Dart .

4. Reinicie Android Studio.

Nota : asegúrese de haber instalado el SDK de Android y de tener un emulador de dispositivo configurado en Android Studio.

Paso 3: Crea tu primer proyecto Flutter

3.1 Crear un nuevo proyecto

Ejecute el siguiente comando en su terminal para crear un nuevo proyecto Flutter:

flutter crea mi primera aplicación flutter

Esto generará una estructura de proyecto como esta:

mi_primera_aplicación_flutter/ 
├── android/ 
├── ios/ 
├── lib/ 
│ └── main.dart 
├── prueba / 
├── pubspec.yaml

3.2 Abrir el proyecto

• VS Code : abre la carpeta directamente.
• Android Studio : se usa File > Openpara cargar el proyecto.

3.3 Ejecutar el proyecto

1. Asegúrese de que un dispositivo o emulador se esté ejecutando:

• Inicie un emulador de Android desde Android Studio.
• Conecte un dispositivo físico y habilite la depuración USB.

2. Ejecute el proyecto:

carrera revoloteante

Alternativamente, presione el botón de reproducción en su IDE.

Paso 4: Comprender la aplicación predeterminada

Flutter crea una “aplicación de contador” predeterminada en lib/main.dart. Veamos el código:

importar 'paquete:flutter/material.dart' ; 

void  main () => runApp ( MyApp ()); 

clase  MyApp  extiende  StatelessWidget  { 
  @override 
  Widget build (BuildContext context) { 
    return  MaterialApp ( 
      título : 'Demostración de Flutter' , 
      tema : ThemeData ( primarySwatch : Colors.blue), 
      inicio : MyHomePage (), 
    ); 
  } 
} 

clase  MyHomePage  extiende  StatefulWidget  { 
  @override 
  _MyHomePageState createState () => _MyHomePageState (); 
} 

clase  _MyHomePageState  extiende  State < MyHomePage > { 
  int _counter = 0 ; 

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

  @override 
  Widget build (BuildContext context) { 
    return  Scaffold ( 
      appBar : AppBar ( title : Text ( "Aplicación Flutter Counter" )), 
      body : Center ( 
        child : Column ( 
          mainAxisAlignment : MainAxisAlignment.center, 
          children : [ 
            Text ( "Has presionado el botón esta cantidad de veces:" ), 
            Text ( 
              '$_counter' , 
              style : TextStyle ( fontSize : 30 ), 
            ), 
          ], 
        ), 
      ), 
      floatingActionButton : FloatingActionButton ( 
        onPressed : _incrementCounter, 
        tooltip : 'Increment' , 
        child : Icon (Icons.add), 
      ), 
    ); 
  } 
}

Paso 5: Personaliza tu aplicación

Para personalizar tu aplicación, intenta modificar el Textwidget dentro de Column:

Texto("¡Bienvenido al desarrollo de Flutter!")

Vuelva a ejecutar la aplicación o utilice la recarga activa presionando ren la terminal o el botón del rayo en su IDE.

¡Felicitaciones! Has configurado Flutter con éxito y has creado tu primera aplicación. El marco reactivo de Flutter y la función de recarga en caliente hacen que el desarrollo sea rápido y divertido. Desde aquí, explora los widgets, la gestión de estados y los complementos para crear increíbles aplicaciones multiplataforma.