Descubre qué son Flutter y Dart, instala las herramientas, crea tu primer proyecto y experimenta la magia del hot reload.
Abrir esta lección en KodokonFlutter es un framework: una gran caja de herramientas de código listo para usar, creada por Google para construir aplicaciones móviles, es decir, los programas que instalas en un teléfono. Su gran fortaleza: escribes tu código una sola vez y funciona en iPhone, Android, la web e incluso en escritorio. Ese código se escribe en Dart, un lenguaje de programación: un conjunto de palabras y reglas que te permiten dar instrucciones a una máquina. Para instalar Flutter, sigue la guía oficial en docs.flutter.dev (la sección Get started): allí descargarás el SDK (Software Development Kit, el kit que contiene todas las herramientas) e instalarás un editor de código como Visual Studio Code con su extensión de Flutter. Después verificas todo en la terminal: una ventana en la que escribes comandos de texto para controlar tu computadora.
flutter doctorEl comando flutter doctor actúa como un médico: examina tu máquina y muestra una lista de verificación, con una marca verde para lo que está listo y una cruz para lo que falta, junto con instrucciones para arreglarlo. Una vez que lo esencial esté en verde, puedes crear tu primer proyecto: la carpeta que contendrá todo el código de tu app. El nombre de un proyecto Flutter se escribe en minúsculas, sin espacios ni acentos, usando guiones bajos (_) para separar las palabras.
flutter create my_first_app
cd my_first_app
flutter runflutter create construye una carpeta my_first_app que contiene una app de demostración completa. cd (change directory) entra en esa carpeta, y flutter run compila y luego lanza la app en un teléfono conectado por USB, en un emulador (un teléfono virtual que se muestra en tu pantalla) o en el navegador Chrome. Todo el código que escribes vive en el archivo lib/main.dart. Reemplaza su contenido con este programa mínimo:
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(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text("Hello Flutter!"),
),
),
);
}
}Leamos las líneas generales, sin intentar dominarlo todo: import carga la caja de herramientas gráficas de Flutter, void main() es el punto de entrada (la primera función que se ejecuta) y runApp inicia la app mostrando el texto "Hello Flutter!" en el centro de la pantalla. Cada pieza se detallará en las próximas lecciones. Ahora, la magia del hot reload: cambia el texto del mensaje, guarda el archivo... y la app mostrada se actualiza al instante, sin reiniciar. Este ciclo ultracorto es una de las grandes fortalezas de Flutter.