Dar el primer paso con Flutter significa entender cómo está organizado un proyecto, qué hace cada archivo y cómo desplegar la aplicación en un emulador. Aquí se desglosan los puntos esenciales para que puedas crear tu primera pantalla funcional con confianza.
¿Cómo desplegar la aplicación en un emulador desde Visual Studio Code?
Para correr la app por primera vez, dirígete a la parte superior de Visual Studio Code y busca la opción Show and Run Commands [0:12]. Escribe "Flutter" y se desplegarán todos los comandos disponibles. Desde ahí, selecciona el emulador que configuraste previamente en Android Studio, identificándolo por el nombre que le asignaste.
Una vez que el emulador esté activo, tienes dos opciones para ejecutar la aplicación:
- Usar el comando
flutter run desde la terminal.
- Presionar F5 directamente en Visual Studio Code [1:07].
Con cualquiera de las dos opciones, la app se conectará y se mostrará en el emulador. Si encuentras problemas en este paso, generalmente se relacionan con permisos de virtualización en tu computador, ya que Android Studio requiere habilitar esta funcionalidad para sus emuladores [0:52].
¿Qué estructura de carpetas tiene un proyecto Flutter?
Al explorar el proyecto, encontrarás varias carpetas con propósitos específicos [1:24]:
- android/ e ios/: contienen la estructura nativa de cada plataforma. Flutter permite generar aplicaciones para ambos sistemas operativos con un solo código base.
- lib/: es la carpeta donde se construye toda la aplicación. Aquí crearás subcarpetas para pantallas, modelos, proveedores y widgets [1:52].
- test/: destinada a las pruebas unitarias de la app.
- assets/: almacena recursos como imágenes y fuentes personalizadas.
El archivo más importante dentro de lib/ es main.dart, que funciona como el punto de entrada de toda la aplicación [2:02].
¿Qué extensiones facilitan el desarrollo en Flutter?
Una extensión recomendada es Flutter Widgets [2:22], que ofrece snippets para agilizar la escritura de código. Estas herramientas de autocompletado reducen errores y aceleran el flujo de trabajo dentro del IDE.
¿Cómo funciona el archivo main.dart y sus componentes principales?
El archivo main.dart contiene los elementos fundamentales para arrancar la aplicación [2:50]:
- material.dart: es el package que importa todos los widgets y funcionalidades del framework. Sin esta importación, no tendrías acceso a los componentes visuales de Flutter.
- void main(): la función principal que da inicio a la ejecución de la aplicación [3:06].
- runApp(): recibe como parámetro el widget raíz y lo renderiza como la primera vista visible [3:14].
¿Cómo crear el primer hola mundo en Flutter?
Para construir la primera pantalla se utiliza un StatelessWidget, que por ahora puedes entender como una clase que representa una vista estática sin estado mutable [3:32]. El proceso es el siguiente:
- Crea una clase llamada
MyApp que extienda de StatelessWidget.
- Dentro de ella, agrega un
Container como estructura base.
- Añade un
child con un widget Text que contenga el string "Hola mundo" [3:50].
dart
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hola mundo',
home: Container(
child: Text('Hola mundo'),
),
);
}
}
Un detalle clave: si intentas mostrar el Container sin envolverlo en un MaterialApp, obtendrás un error [4:14]. La solución es usar Alt + Enter para hacer un wrap widget y seleccionar MaterialApp. Este widget es el contenedor principal de toda aplicación Flutter y ofrece propiedades como home para definir la pantalla inicial y title para asignar un nombre [4:24].
Al guardar los cambios, Flutter ejecuta un hot reload que actualiza la interfaz en segundos sin reiniciar la aplicación completa [4:06]. Esta funcionalidad es una de las ventajas más valoradas del framework porque permite iterar rápidamente sobre el diseño.
Con estos fundamentos ya tienes tu primera aplicación funcionando. El siguiente paso natural es explorar cada archivo del proyecto y comenzar a transformar este "Hola mundo" en algo más completo. ¿Qué parte de la estructura te generó más curiosidad?
