No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Flutter

Curso de Flutter

Alison Jimenez

Alison Jimenez

Estructura Básica de una Aplicación Flutter

3/26
Recursos

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?

  1. Crea tu widget principal:
    • Usa un StatelessWidget llamado MyApp.
    • Utiliza un Container como base.
  2. Añade contenido:
    • Agrega un child dentro del Container con un widget de texto que diga “Hola Mundo”.
  3. 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.

Aportes 26

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

lo siento teacher, no me puedo concentrar con tanta belleza 😍
Me enrredo un monton, espero lograr más claridad a medida que avance
Flutter ofrece varias ventajas para el desarrollo de aplicaciones móviles, entre las cuales destacan: 1. **Desarrollo multiplataforma**: Permite crear aplicaciones para iOS y Android desde un solo código base, ahorrando tiempo y esfuerzo. 2. **Interfaz rica y atractiva**: Utiliza widgets personalizables que permiten construir interfaces nativas de alta calidad. 3. **Hot Reload**: Facilita la visualización de cambios en tiempo real, acelerando el proceso de desarrollo. 4. **Alto rendimiento**: Flutter compila código nativo, lo que resulta en aplicaciones rápidas y eficientes. 5. **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.
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]
Listo para empezar, todo parece funcionar bien. ![](https://static.platzi.com/media/user_upload/Captura%20desde%202024-11-24%2000-53-13-7d83c1c0-2447-4987-b811-40852b05800d.jpg)
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.
Encontré un poco de documentación acerca de esto <https://docs.flutter.dev/get-started/fundamentals/dart>
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.
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** 1. La aplicación comienza con `main`. 2. `runApp` ejecuta el widget `MyApp`. 3. `MyApp` crea una aplicación con diseño Material Design. 4. 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.
No puedo acceder al emulador, alguien sabe por qué o cómo solucionarlo? ![](https://static.platzi.com/media/user_upload/image-ce6dbc8d-e72b-4411-bb8e-42c8b4377baa.jpg) Me aparece este mensaje: ![](https://static.platzi.com/media/user_upload/image-5eb67bba-2259-4176-862d-ce74e9d72f29.jpg) Ayúdenme por favor, gracias
Hola Si llegan a tener este problema al tratar de ejecutar la app en un emulador de android desde mac: **FAILURE: Build failed with an exception.** **\* What went wrong:** **Execution failed for task ':gradle:compileGroovy'.** **> BUG! exception in phase 'semantic** analysis' in source unit 'xxxxxx' Unsupported class file major version 65 Solo deben agregar el path de la version de java al android/gradle.properties ```js org.gradle.jvmargs=-Xmx4G -XX:+HeapDumpOnOutOfMemoryError android.useAndroidX=true android.enableJetifier=true org.gradle.java.home=/Library/Java/JavaVirtualMachines/jdk-19.0.2+7/Contents/Home ```org.gradle.jvmargs=-Xmx4G -XX:+HeapDumpOnOutOfMemoryErrorandroid.useAndroidX=trueandroid.enableJetifier=trueorg.gradle.java.home=/Library/Java/JavaVirtualMachines/jdk-19.0.2+7/Contents/Home
Alguien por favor me podria indicar como uso el comando alt + enter en MAC? Hasta el momento veo que todo el curso esta muy focalizado al entorno windows y con Android
Alguien seria tana amble de ayudarme a resolver este problema ,segui paso a paso y no se que me pueda estar faltando ![](https://static.platzi.com/media/user_upload/image-225792ba-f830-4539-8fdb-5db1b96fb8d7.jpg)
![]()![](https://static.platzi.com/media/user_upload/image-d3aa4ed6-7919-4504-908a-5cc7c9119c76.jpg) 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
Por si tienen problemas con Android Studio [Android Studio se queda minimizado y no puedo maximizarlo - Microsoft Community ](https://answers.microsoft.com/es-es/windows/forum/all/android-studio-se-queda-minimizado-y-no-puedo/c3fd1b58-4375-453c-8cf3-d219e6f86ca6) [avd - ¿Porque no puedo ejecutar el emulador de Android? - Stack Overflow en español](https://es.stackoverflow.com/questions/14505/porque-no-puedo-ejecutar-el-emulador-de-android)
El curso de Flutter te permite desarrollar aplicaciones móviles de alto rendimiento para iOS y Android utilizando una única base de código. En la introducción, aprenderás sobre la estructura básica de una aplicación Flutter, analizando archivos como `main.dart` y comprendiendo la organización de carpetas como `lib`, `ios` y `android`. También se cubrirá cómo desplegar tu primera aplicación en un emulador y realizar un "Hola Mundo" usando un `Stateless Widget` y el `MaterialApp`. Además, se recomienda el uso de extensiones en Visual Studio Code para mejorar la experiencia de desarrollo.
Hola buen dia ! puedo trabajar con Flutter flow desde mi cuenta sin necesidad de instalaros en mi laptop?
dado que no pude usar un emulador, me decanté por usar mi dispositivo
\*\*\* TUTORIAL **\*\*\*** Si de pronto hay personas que quizás ejecutar un emulador de Android se les es un poco pesado. Pueden correr Flutter desde su celular. Solamente tendrían que conectar el teléfono el computador y luego activar las opciones de desarrollador en Android (Si no saben pueden buscar un tutorial en youtube). Una vez activadas vuelven a \> Configuraciones \> Opciones de desarrollador \> Y bajan un poco hasta una una que dice **Depuración** Y activan las que dicen **Depuración por USB** y **Instalar Vía USB** Ya por último vuelven al vscode y si oprimen Ctrl + Shift izquierdp + P, van a **> Flutter: Select Device** y les debe de aparecer el dispositivos de ustedes. Quizás después de hacer los pasos de Android que les mencione anteriormente no les salga de una, puede desconectar el cable del pc y volverlo a conectar y ya debería de estarles funcionando. 🙂 ![]()![](https://static.platzi.com/media/user_upload/image-866272f0-e2d2-494b-9e8b-04d26cb531c8.jpg)
Buenas Noches He realizado todos los pasos pero no puedo lograr que se instale en mi PC el HAXM y no encuentro forma como solucionarlo. Mi Pc es <https://prnt.sc/qEtW5ev4dMQX> agradecere cualquier ayuda para solucionarlo. Muchas Gracias
No he podido con el despliegue de la aplicación en Visual Studio, he hecho lo que dice la profesora pero no funciona, en qué estoy fallando? ![](https://static.platzi.com/media/user_upload/image-78686450-6cc7-4d33-9ed8-d1b9e7e5d3ce.jpg)dio.
alguien sabe por que en Android Studio o me sugiere asi como le sugiere a la profe en Visual Studio? y le instale el plugin de snippets pero no me sugiere por ejemplo el "stateLessW"
![](https://static.platzi.com/media/user_upload/%7B1FAEB2A7-E2A6-4662-991D-3BE2D1E0239D%7D-ae02e452-fc9a-4d62-b48f-aa9b1dac48cc.jpg)
`import 'package:flutter/material.dart';` `void main() => runApp(const MyApp());` `class MyApp extends StatelessWidget { const MyApp({super.key});` `@override Widget build(BuildContext context) { return const MaterialApp( title: 'Hola Mundo', home: Scaffold( body: Center( child: Text('Hola Mundo'), ), ), ); }}`
`import 'package:flutter/material.dart';` `void main() => runApp(const MyApp());` `class MyApp extends StatelessWidget {  const MyApp({super.key});` `  @override  Widget build(BuildContext context) {    return const MaterialApp(      title: 'Hola Mundo',      home: Scaffold(               body: Center(          child: Text('Hola Mundo'),        ),      ),    );  }}`
import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget {  const MyApp({super.key});   @override  Widget build(BuildContext context) {    return const MaterialApp(      title: 'Hola Mundo',      home: Scaffold(               body: Center(          child: Text('Hola Mundo'),        ),      ),    );  }}