Como ya vimos en el artículo sobre Flutter para desarrollo web, Flutter es un framework de código abierto de Google cuyo objetivo es agilizar y facilitar el desarrollo de aplicaciones en multiplataforma. En este artículo veremos cómo crear nuestra primera app de manera sencilla. ¡Vamos a ello!
Índice de contenidos
Para empezar con nuestro proyecto, primero tenemos que instalar Flutter y preparar nuestro entorno de desarrollo. Cada sistema operativo tiene su forma de instalación, está perfectamente explicado en la propia documentación de Flutter. Para poder probar nuestra aplicación, necesitaremos emularla, por lo que también debemos instalar Android Studio para crear emuladores Android. Si queremos desarrollar y probar en iOS, los requerimientos son algo distintos, deberás instalar Xcode y CocoaPods. En esta guía desarrollaremos desde Windows y para Android, ya que el desarrollo en iOS requiere de licencias específicas. Recordemos que el desarrollo es el mismo, solo cambian la manera de emular o construir la aplicación.
Una vez has completado la instalación siguiendo la guía, comprobaremos desde la consola el estado de Flutter con el comando «flutter doctor». De esta manera podemos tener una visión general de los servicios que usa y su estado.
flutter doctor¡Ya estamos listos para crear nuestro proyecto! El primer paso es crear una carpeta y abrir la terminal en ella. Una vez aquí crearemos el proyecto con el comando:
flutter create mi_primera_app¡Listo! Verás que en tu carpeta se han creado un montón de archivos y directorios. Esta es la base de nuestra aplicación.
Cuando creamos un nuevo proyecto Flutter, se genera una estructura de directorios y archivos estándar. Entender esta estructura es fundamental para organizar y desarrollar eficientemente nuestra aplicación. Estos son los componentes principales:
En la raíz del proyecto encontrarás varios archivos y carpetas importantes:
pubspec.yaml: Este archivo es crucial. Aquí se definen las dependencias del proyecto, los assets (imágenes, fuentes, etc.), y otras configuraciones del proyecto..gitignore: Especifica qué archivos y carpetas deben ser ignorados por Git.README.md: Documentación básica del proyecto.La carpeta lib es donde pasaremos la mayor parte del tiempo escribiendo código Dart para la aplicación.
lib/main.dart: Es el punto de entrada de la aplicación Flutter. Aquí se define la función main() y generalmente el widget raíz de la app.test/: Contiene los archivos de prueba para la aplicación. android/: Contiene archivos específicos para la compilación y configuración de Android.ios/: Similar a la carpeta android, pero para iOS.web/: (Si está habilitado) Contiene archivos para la compilación web.build/: Esta carpeta se genera automáticamente y contiene los archivos compilados de tu aplicación.assets/: Aunque no se crea por defecto, es común crear esta carpeta para almacenar recursos como imágenes, fuentes, etc.lib/screens/: No es parte de la estructura por defecto, pero es una convención común para organizar los diferentes screens o páginas de la app.lib/widgets/: Otra carpeta común para almacenar widgets personalizados reutilizables.lib/models/: Para almacenar las clases de modelo de datos.lib/services/: Para servicios como llamadas a API, manejo de base de datos local, etc.[nombre_proyecto].iml, .idea/, .vscode/: Archivos y carpetas específicos del IDE que estés utilizando.
analysis_options.yaml: Define reglas para el análisis estático del código Dart.
Dart es el lenguaje de programación utilizado para desarrollar aplicaciones en Flutter. Es un lenguaje orientado a objetos, con tipado estático, creado por Google. Entender Dart es fundamental para trabajar eficientemente con Flutter.
En Flutter, Dart se utiliza para definir la estructura, lógica y diseño de la aplicación. Estos son algunos conceptos clave:
En Flutter, todo es un widget. Para crear la interfaz de usuario, utilizaremos diversos widgets como MaterialApp, Scaffold, AppBar, y Text. Puedes personalizar estos widgets para adaptar el aspecto y comportamiento de tu aplicación.
Primero, vamos a establecer la estructura básica de nuestra aplicación:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mi Primera App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Página de Inicio'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Has presionado el botón esta cantidad de veces:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineLarge, // Use headlineLarge for the updated API
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Incrementar',
child: const Icon(Icons.add),
),
);
}
}
MaterialApp: Es el widget raíz que proporciona varios widgets predeterminados de Material Design.Scaffold: Proporciona una estructura básica de diseño para la interfaz de usuario.AppBar: Crea una barra de aplicación en la parte superior de la pantalla.Column: Organiza sus widgets hijos en una columna vertical.FloatingActionButton: Crea un botón flotante circular.Vamos a añadir algunos estilos básicos:
// En la clase MyApp
theme: ThemeData(
primarySwatch: Colors.purple,
fontFamily: 'Roboto',
),
// En la clase _MyHomePageState
Text(
'Has presionado el botón esta cantidad de veces:',
style: TextStyle(fontSize: 18, color: Colors.grey[600]),
),
Text(
'$_counter',
style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.purple),
),Añade una imagen a tu aplicación:
assets en la raíz de tu proyecto.flutter_logo.png) a esta carpeta.pubspec.yamlImage.asset(
'assets/flutter_logo.png',
width: 100,
height: 100,
),Vamos a añadir un botón que cambie el color del contador.
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Color _color = Colors.purple;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _changeColor() {
setState(() {
_color = _color == Colors.purple ? Colors.blue : Colors.purple;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
// ... (código anterior)
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/flutter_logo.png',
width: 100,
height: 100,
),
Text(
'Has presionado el botón esta cantidad de veces:',
style: TextStyle(fontSize: 18, color: Colors.grey[600]),
),
Text(
'$_counter',
style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: _color),
),
ElevatedButton(
onPressed: _changeColor,
child: Text('Cambiar Color'),
),
],
),
),
// ... (código posterior)
);
}
}
Como hemos comentado antes, para esta guía crearemos los emuladores Android en Android Studio. Para ello, abrimos Android Studio y en herramientas, seleccionaremos SDK manager. Se nos abrirá una ventana donde debemos seleccionar SDK Tools Tab. Aquí debemos seleccionar las siguientes opciones:
Ahora desde la pestaña de herramientas, pulsamos «Device Manager», aquí creamos el emulador. Es bastante sencillo, solo debemos seleccionar las características que nos interesan. Puedes seguir la guía de creación de emuladores de Android Studio si tienes alguna duda.
También tenemos la opción de usar nuestro propio dispositivo como emulador. Esto es posible para los dispositivos Android.
Volvemos a Visual Studio Code para lanzar nuestro emulador. Para seleccionarlos tenemos dos opciones. La primera es pulsando sobre la opción Flutter, en la barra inferior de VSCode a la derecha. La segunda es con el comando Ctrl + Shift + P. Con cualquiera de estas dos opciones nos saldrá un buscador en la parte superior. Si escribimos aquí Flutter nos saldrá la opción «Flutter: Select Device». Al pulsar en ella nos saldrán los diferentes emuladores que tengamos, recuerda que conviene probar la aplicación en varios dispositivos diferentes. Al seleccionar el emulador se abrirá una ventana con el dispositivo móvil, esperamos a que cargue y ya podemos lanzar nuestra aplicación. Desde la pestaña «Ejecución y depuración» de VSCode, pulsamos sobre «run» y se lanzará en el emulador.
Para construir la app en Flutter, sigue estos pasos para las diferentes plataformas:
bashflutter build apk
build/app/outputs/flutter-apk/app-release.apk.bashflutter build ios
ios/Runner.xcworkspace.bashflutter config --enable-web
bashflutter build web
build/web.¡Ya lo tienes! Puedes probar en tus propios dispositivos la aplicación que hemos hecho. Con esta guía básica ya tienes la base para experimentar y desarrollar tus aplicaciones en Flutter. En el futuro profundizaremos más sobre este lenguaje y sobre el desarrollo de aplicaciones. ¿Te atreves a seguir explorando? ¡Te leemos en comentarios!
Desde el pasado sábado, muchos usuarios de Instagram han notado un cambio importante, algo que… Leer más
Sabemos que el diseño web está en constante evolución y en Caronte nos gusta saber… Leer más
Descubre cómo seleccionar el framework JavaScript ideal para tu proyecto en 2025. Explora factores cruciales… Leer más
Comenzamos 2025 por todo lo alto con nuestra nueva selección de extensiones para Visual Studio… Leer más
Crea índices automáticos para tus maquetaciones gracias a la tabla de contenidos. Aprende a utilizar… Leer más
Nos encontramos en la casilla de salida de este 2025 y no podemos faltar a… Leer más