Despliegue y Estructura Básica de una App con Flutter

Resumen

Flutter ofrece una estructura robusta y flexible para desarrollar aplicaciones multiplataforma. Aquí exploraremos cómo iniciar tu primera aplicación en Flutter, entender su estructura y personalizarla para obtener resultados profesionales y funcionales.

¿Cómo desplegar tu primera aplicación en Flutter?

Asegúrate de tener Flutter instalado y configurado correctamente en tu máquina.
Desde Visual Studio Code, utiliza Show Unround Command para escribir y buscar comandos relacionados con Flutter.
Configura un emulador desde Android Studio, elige uno previamente creado y asegúrate de que tu sistema tiene habilitada la virtualización para ejecutar correctamente los emuladores.
Usa el comando flutter run o simplemente presiona F5 para ejecutar la aplicación.

Solución de problemas

Si el emulador no funciona, revisa:

Permisos de virtualización de tu equipo.
Configuraciones específicas de Android Studio.

¿Cómo está estructurado un proyecto de Flutter?

Flutter divide su proyecto en carpetas y archivos clave que facilitan el desarrollo:

Carpetas principales:
- android y ios: Contienen configuraciones específicas para cada plataforma.
- lib: Aquí se desarrolla el código principal de tu aplicación.
- test: Diseñada para pruebas unitarias.
- assets: Almacena imágenes y fuentes personalizadas.
Archivo main.dart:
- Es el punto de entrada de la aplicación.
- Contiene la función runApp que inicializa la aplicación.
- Incluye configuraciones iniciales como MaterialApp para definir el tema y la estructura básica de la app.

¿Cómo crear un “Hola Mundo” en Flutter?

Crea tu widget principal:
- Usa un StatelessWidget llamado MyApp.
- Utiliza un Container como base.
Añade contenido:
- Agrega un child dentro del Container con un widget de texto que diga “Hola Mundo”.
Configura MaterialApp:
- Haz un wrap del widget principal con MaterialApp.
- Define las propiedades title y home para mostrar correctamente tu contenido.

Hot Reload

Guarda los cambios y usa el hot reload para visualizar instantáneamente los resultados en el emulador.

¿Qué herramientas y extensiones facilitan el desarrollo en Flutter?

Extensiones recomendadas:
- Flutter Widgets: Ofrece atajos y plantillas para widgets.
- Dart: Optimiza el desarrollo con Flutter en Visual Studio Code.

Asegúrate de explorar estas herramientas para mejorar la productividad.

Yamid Horacio Rodríguez

student•

lo siento teacher, no me puedo concentrar con tanta belleza 😍

Carlos Gutiérrez

student•

En el minuto 6:16 usa el atajo de teclado para quick fix y menciona que lo muestra con Alt+enter. Los atajos de teclado creo que pueden cambiar según el sistema operativo donde estemos corriendo el VSCode, en mi caso el quick fix lo obtengo con ctrl+. (control + punto).

Recomiendo que lean la hoja de atajos del teclado y la pueden encontrar en el menú Help->Keyboard Shortcuts Reference [ctrl+K ctrl+R]

Gregson Murcia Castro

student•

buenisimo gracias

Stiven Gordillo Ruiz

student•

Me enrredo un monton, espero lograr más claridad a medida que avance

Miguel Sosa

student•

Totalmente, más allá de la intro, me hubiera gustado crear un proyecto de cero

Yamid Horacio Rodríguez

student•

Flutter ofrece varias ventajas para el desarrollo de aplicaciones móviles, entre las cuales destacan:

Desarrollo multiplataforma: Permite crear aplicaciones para iOS y Android desde un solo código base, ahorrando tiempo y esfuerzo.
Interfaz rica y atractiva: Utiliza widgets personalizables que permiten construir interfaces nativas de alta calidad.
Hot Reload: Facilita la visualización de cambios en tiempo real, acelerando el proceso de desarrollo.
Alto rendimiento: Flutter compila código nativo, lo que resulta en aplicaciones rápidas y eficientes.
Gran comunidad y recursos: Amplio soporte y documentación, además de plugins y paquetes que facilitan la integración de funcionalidades.

Estas características hacen de Flutter una opción atractiva para desarrolladores y empresas que buscan crear aplicaciones móviles de manera eficiente y efectiva.

Juan López

student•

No explica nada, solamente escribe código, es lo que no me ha gustado de 0latzi, no hay forma de tener los fundamentos, es decir, por qué void main() => ... tiene esa estructura, porque la función MyApp() se pasa como una constante.

muchas dudas y poca explicación. Si quisiera solo ver código pues uso cursosrllr y ya :S

Daniel Loyo

student•

La verdad el inicio es bastante denso con una buena curva de aprendizaje, apenas estoy adentrandome en dart y flutter.

mi recomendacion general es generar retroalimentacion con un LLM, con el codigo usado y el resumen de la clase, para asi hacer preguntas y poder profundizar en lo que se necesite de manera rapida y agil

Luis Arturo Sarmiento Aguilera

student•

Tengo un inconveniente con el emulador. Al intentarlo abrir desde VSC, se ejecuta y abre por medio segundo para despues minimizarse, pero no puedo maximizarlo de nuevo, no funciona. Si paso el mouse por encima de la aplicacion, puedo ver el emulador corriendo, pero no me permite maximizarlo.

En Android Studio si puedo abrir el emulador sin problema, por qué sucede esto en VSC?

Alison Jimenez

teacher•

Esto sucede a veces por las configuraciones del emulador y por eso a veces se ve por fuera de la resolución de la pantalla con alt y barra puedes mover el emuladora o también muchas veces es mejor abrir el emulador primero por fuera de vsc y luego allí si desplegarlo

Luis Arturo Sarmiento Aguilera

student•

Gracias profe, al final continué con el proyecto desde otra PC con 2 pantallas. Pero parece que si era eso

Santiago Carrasco Aldabe

student•

Encontré un poco de documentación acerca de esto

Alison Jimenez

teacher•

Gracias por compartirla!

Stiven Gordillo Ruiz

student•

En Flutter, un widget es el bloque de construcción básico de la interfaz de usuario. Todo en Flutter es un widget, desde los elementos más simples, como un botón o un texto, hasta componentes complejos, como un formulario, un layout o incluso toda una aplicación.

Carlos Gutiérrez

student•

Listo para empezar, todo parece funcionar bien.

Alison Jimenez

teacher•

Súper !

Arnold Restrepo Hernandez

student•

En Mac OS aparecen muchos problemas, les dejo una lista de los posibles problemas y de como los solucione:

# Problemas encontrados y sus soluciones

## 1. Error: Execution failed for task ':app:compileFlutterBuildDebug'.

- **Causa:** Flutter no puede ejecutar su binario desde Gradle.

- **Solución:**

- Verificar que flutter.sdk en local.properties esté bien definido.

- Asegurarse de que el binario tenga permisos de ejecución:

```bash

chmod +x /Users/arestrepomusic/development/flutter/bin/flutter

```

---

## 2. Uso de archivos build.gradle.kts y settings.gradle.kts

- **Causa:** Flutter por defecto no soporta Gradle con Kotlin Script (kts) sin configuraciones adicionales.

- **Solución:**

- Borrar la carpeta android y regenerarla de forma estándar:

```bash

rm -rf android

flutter create .

```

---

## 3. Permiso denegado al ejecutar /development/flutter/bin/flutter

- **Causa:** El binario no tenía permisos de ejecución.

- **Solución:**

- Darle permisos ejecutables:

```bash

chmod +x /Users/arestrepomusic/development/flutter/bin/flutter

```

---

## 4. Falta del archivo build.gradle en /android/app/

- **Causa:** Solo existía build.gradle.kts, pero Flutter busca el archivo tradicional (build.gradle).

- **Solución:**

- Usar la estructura estándar generando de nuevo el proyecto o la carpeta Android:

```bash

flutter create .

```

---

> ✅ **Recomendación final:**

Si ves que sigue fallando, es mejor eliminar la carpeta android y recrearla con:


flutter create .

Cesar Buelvas Torres

student•

Teniendo Android Studio ya configurado, por que se empeñan en dar las instrucciones con Visual Studio Code ?

Stiven Gordillo Ruiz

student•

Clase dinamica 5:17 En Dart, una clase dinámica no es un concepto formal, pero a menudo se refiere al uso de la palabra clave dynamic para definir tipos de datos que pueden cambiar en tiempo de ejecución. Esto permite flexibilidad al costo de la seguridad de tipos estática.

Jhony Perez

student•

Para los que tienen problemas con el emulador, es decir que se inicia pero se muestra minimizado y no deja maximizarlo a pesar que clickean, dejo la solucion que me funcionó.

Unicamente cambiar la escala de la pantalla. En mi caso estaba 125% y la he cambiado a 100%. Luego de cerrar todo y abrir nuevamente, ya veo el emulador.

Harbeilin Ibarguen

student•

parce estoy perdido

Platzi Team

student•

Jejeje, ánimos, hoy el profe se echó casi las 3 horas de la clase explicando como instalar en iOS. Por mi caso hace 2 dias lo intenté instalar en windows y ayer lo empecé a instalar en iOS y no fue hasta hoy que durante la clase y con ayuda de un LLM hice la instalación

Platzi Team

student•

Frami Suhey Flores Herrera

student•

El código deberia poder verse completo, tuve problemas para entender la parte final de la estructura. Ahi va el çódigo por si le paso igual a alguien:

import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Hola Mundo', home: Container(child: const Text('Hola Mundo')), ); }}

JOSE GUILLERMO VÁSQUEZ BENITEZ

student•

Por dios llevo todo el día instalando y he visto mas foros y consultas a chats gpt que el curso (clase 3), deberían aclarar como solucionar los problemas en el curso o dividir en 2 partes si se extiende el curso

ANDRES FELIPE CAÑAVERAL POSADA

student•

Hola, a mi no me permitio visualizar el main desde un emulador, sin embargo puedes correr el codigo para que visualices desde un navegador.

Emmanuel Alejandro Vázquez Trujillo

student•

Me podrian ayudar por alguna razon no puedo darle clic al emulador no se puede abrir en la imagen aparece que ya cargo pero doy clic y no se abre

John Steven Bernal Gonzalez

student•

El código es un ejemplo básico de una aplicación creada con Flutter, una tecnología de Google para construir interfaces gráficas multiplataforma. A continuación, te explico paso a paso cada parte del código:

1. Importación de paquetes

import 'package:flutter/material.dart';

Este paquete es el núcleo de Flutter para construir interfaces de usuario.
Incluye una amplia gama de widgets y funcionalidades necesarias para diseñar vistas.

2. La función principal

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

main: Es el punto de entrada de la aplicación. Es la primera función que se ejecuta al iniciar.
runApp: Lanza la aplicación, vinculando el árbol de widgets inicial al sistema operativo.
MyApp: Es la clase que define la estructura inicial de la aplicación.

3. Clase MyApp

class MyApp extends StatelessWidget { const MyApp({super.key});

@override Widget build(BuildContext context) { return MaterialApp( title: 'Hola Mundo', home: Container(child: Text('Hola Mundo')), ); } }

Componentes importantes:

StatelessWidget:
- Es una clase base que representa widgets que no tienen un estado mutable (no cambian durante la ejecución).
- Sirve para construir componentes estáticos de la interfaz.
Constructor MyApp:
- El constructor tiene el modificador const, lo que significa que es una instancia inmutable.
Método build:
- Devuelve un árbol de widgets que define la interfaz de usuario.

4. Detalles del build

return MaterialApp( title: 'Hola Mundo', home: Container(child: Text('Hola Mundo')), );

MaterialApp:
- Es un widget principal que configura una aplicación basada en el diseño Material Design.
- Aquí define dos propiedades:
  - title: El título de la aplicación, que aparece en algunos contextos como herramientas de depuración.
  - home: El widget principal de la aplicación (la pantalla inicial).
Container:
- Un widget contenedor básico que puede incluir otros widgets.
Text:
- Muestra el texto "Hola Mundo".

Resumen funcional

La aplicación comienza con main.
runApp ejecuta el widget MyApp.
MyApp crea una aplicación con diseño Material Design.
La pantalla principal muestra un texto simple: "Hola Mundo".

Es un ejemplo inicial típico en Flutter para entender la estructura básica de una aplicación.

Julian Mauricio Perez Mora

student•

Sí, Julian Mauricio, para seguir el paso a paso de la clase, debes borrar el contenido del archivo main.dart y empezar desde cero como lo hace el profesor. Esto te permitirá construir la aplicación progresivamente.

Sebastían Rentería

student•

Donde explique la embarra!!!

Despliegue y Estructura Básica de una App con Flutter

Introducción a Flutter y Dart

Desarrollo de Apps Multiplataforma con Flower de Google

Configuración de Flutter y Dart para Desarrollo de Apps Multiplataforma