Scribd
Cargar
26 vistas5 páginas

Guia Flutter (Desarrollar APPs)

Este documento proporciona una guía paso a paso para instalar Flutter y crear un proyecto básico. Incluye instrucciones sobre la instalación del SDK, la creación de un nuevo proyecto, la estructura de archivos, la escritura de un widget simple y el uso de dependencias. También se menciona la función de Hot Reload y cómo construir y desplegar aplicaciones para Android e iOS.

Cargado por

oscarleo_88
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
26 vistas5 páginas

Guia Flutter (Desarrollar APPs)

Este documento proporciona una guía paso a paso para instalar Flutter y crear un proyecto básico. Incluye instrucciones sobre la instalación del SDK, la creación de un nuevo proyecto, la estructura de archivos, la escritura de un widget simple y el uso de dependencias. También se menciona la función de Hot Reload y cómo construir y desplegar aplicaciones para Android e iOS.

Cargado por

oscarleo_88
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

1.

Instalar Flutter

Primero, debes instalar Flutter en tu máquina.

Requisitos:

• Sistema operativo: Windows, macOS o Linux

• Versión de Dart: Flutter viene con Dart preinstalado, no necesitas instalarlo


por separado.

Pasos:

1. Descargar Flutter:

o Visita flutter.dev y descarga el SDK de Flutter para tu sistema operativo.

o Extrae el archivo descargado y agrega el directorio de flutter/bin a tu


variable de entorno PATH.

2. Verificar instalación:

o Abre la terminal (cmd o terminal en macOS/Linux) y ejecuta el siguiente


comando:

bash

CopiarEditar

flutter doctor

o Esto verificará si todo está instalado correctamente. Si falta algo, te


indicará qué necesitas instalar (por ejemplo, Android Studio, Xcode).

3. Instalar dependencias:

o Para desarrollo en Android: necesitas tener instalado Android Studio o


Android SDK.

o Para desarrollo en iOS (macOS): debes tener Xcode instalado.

2. Crear un Proyecto Flutter

Una vez que hayas instalado Flutter, puedes crear tu primer proyecto.

1. Crear un nuevo proyecto:


o Abre la terminal y navega al directorio donde quieras guardar el
proyecto.

o Ejecuta:

bash

CopiarEditar

flutter create nombre_del_proyecto

o Flutter creará un proyecto de ejemplo con una estructura básica.

2. Abrir el proyecto:

o Abre el proyecto recién creado en tu editor de código favorito (VS Code


o Android Studio son los más comunes).

3. Estructura Básica de un Proyecto Flutter

Cuando abres el proyecto, verás varios archivos importantes:

• lib/main.dart: Este es el archivo principal donde escribes la mayoría de tu


código de Flutter.

• pubspec.yaml: Aquí defines las dependencias, como paquetes de Flutter o


plugins que utilizarás en tu proyecto.

4. Escribir tu Primer Widget

Flutter está basado en widgets, que son los componentes básicos de la interfaz de
usuario.

1. Modificar main.dart:

o Abre lib/main.dart y modifica el contenido para crear una aplicación


sencilla:

dart

CopiarEditar

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('Mi Primera App Flutter')),

body: Center(

child: Text('¡Hola, Flutter!'),

),

),

);

2. Ejecutar la aplicación:

o Si tienes un dispositivo o emulador conectado, ejecuta:

bash

CopiarEditar

flutter run

o Esto iniciará la aplicación en tu dispositivo/emulador.

5. Usar Widgets Comunes

Flutter tiene una rica colección de widgets listos para usar. Algunos de los más
comunes son:
• Container: Usado para agregar un contenedor de diseño.

• Text: Muestra texto en la interfaz.

• Column y Row: Para crear diseños de múltiples widgets en una columna o fila.

• Scaffold: Una estructura básica que tiene AppBar, Drawer, Body, etc.

dart

CopiarEditar

Container(

margin: EdgeInsets.all(10),

child: Text('Texto en contenedor'),

6. Agregar Dependencias

Si necesitas agregar paquetes adicionales, edita el archivo pubspec.yaml y agrega las


dependencias que necesitas.

Por ejemplo, si quieres usar el paquete http para hacer solicitudes HTTP, agrega:

yaml

CopiarEditar

dependencies:

flutter:

sdk: flutter

http: ^0.13.3

Luego, ejecuta:

bash

CopiarEditar

flutter pub get


7. Hot Reload

Flutter tiene una característica muy útil llamada Hot Reload que te permite ver los
cambios de inmediato sin reiniciar la aplicación. Simplemente guarda los cambios y
verás el resultado al instante.

8. Construir y Desplegar

Una vez que hayas terminado de desarrollar, puedes construir tu aplicación para
Android o iOS.

• Para Android:

bash

CopiarEditar

flutter build apk

• Para iOS (en macOS):

bash

CopiarEditar

flutter build ios

Puedes desplegar la aplicación directamente a un dispositivo conectado o emulador.

Recursos Útiles:

• Documentación Oficial: flutter.dev/docs

• Flutter codelabs: flutter.dev/codelabs

• DartPad: Prueba Flutter directamente desde el navegador: dartpad.dev

¡Con esta guía rápida podrás comenzar a desarrollar aplicaciones móviles con
Flutter!

También podría gustarte