Tutorial Flutter: Desarrollo de Aplicaciones Móviles con Dart para Principiantes

Bienvenido a este tutorial Flutter donde aprenderás a crear aplicaciones móviles con Dart paso a paso. Si eres un desarrollador principiante, aquí te acompañaremos desde la instalación del entorno, la creación de tu primer proyecto, hasta la construcción de interfaces intuitivas, manejo básico de estado y la implementación de funcionalidades comunes.

¿Por qué elegir Flutter y Dart para el desarrollo de apps móviles?

Flutter es un framework de código abierto desarrollado por Google que ha revolucionado la manera de crear aplicaciones móviles, web y de escritorio con una sola base de código. Utiliza Dart, un lenguaje de programación rápido, moderno y optimizado para interfaces.

Ventajas principales de Flutter para principiantes

Desarrollo rápido con Hot Reload: Cambia el código y ve los resultados al instante.
Widgets personalizables y flexibles: Diseña interfaces atractivas sin depender de componentes nativos.
Un solo código para Android y iOS: Reduce el tiempo y esfuerzo para lanzar en múltiples plataformas.

Ahora sí, empecemos con el tutorial Flutter para principiantes.

1. Instalación del entorno de desarrollo

Para crear aplicaciones con Flutter y Dart necesitamos configurar algunas herramientas.

Paso 1: Instalar Flutter SDK

Accede al sitio oficial de Flutter: https://flutter.dev/docs/get-started/install.
Descarga la versión del SDK que corresponda a tu sistema operativo (Windows, macOS, Linux).
Descomprime el archivo descargado y coloca la carpeta flutter en una ubicación permanente.

Paso 2: Configurar variables de entorno

Agrega el binario de Flutter a la variable PATH para que puedas usarlo desde cualquier consola.

Ejemplo para macOS/Linux (bash):

export PATH="$PATH:`pwd`/flutter/bin"

1 2	export PATH="$PATH:`pwd`/flutter/bin"

Ejemplo para Windows (PowerShell):

setx PATH "%PATH%;C:\ruta\a\flutter\bin"

1 2	setx PATH "%PATH%;C:\ruta\a\flutter\bin"

Paso 3: Verificar la instalación

Abre una terminal y ejecuta:

flutter doctor

1 2	flutter doctor

Este comando revisará las dependencias, SDKs de Android/iOS, y herramientas necesarias.

Paso 4: Instalar un IDE

Se recomienda utilizar Visual Studio Code o Android Studio para Flutter.

VS Code + Extensión Flutter y Dart
Android Studio con componente Flutter instalado

¡Listo! Ya tienes el entorno para comenzar a desarrollar apps Flutter.

2. Crear un proyecto Flutter

Ahora crearemos nuestro primer proyecto desde la terminal.

flutter create mi_app_flutter
cd mi_app_flutter
flutter run

flutter create mi_app_flutter

cd mi_app_flutter

flutter run

Esto generará una app básica y la ejecutará en un emulador o dispositivo conectado.

Ejecutar la app en un emulador

En Android Studio crea un AVD (Android Virtual Device) para emular un teléfono.
En VS Code usa el comando Flutter: Launch Emulator.

¡Con estos pasos ya verás la app predeterminada corriendo!

3. Diseño de interfaces con widgets

Flutter usa widgets para construir todo en la app: texto, botones, listas y layouts.

Estructura básica de un widget

import 'package:flutter/material.dart';

void main() => runApp(MiApp());

class MiApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hola Flutter'),
        ),
        body: Center(
          child: Text('¡Bienvenido a Flutter para principiantes!'),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MiApp());

class MiApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'App Demo',

home: Scaffold(

appBar: AppBar(

title: Text('Hola Flutter'),

body: Center(

child: Text('¡Bienvenido a Flutter para principiantes!'),

);

}

Explicación:

StatelessWidget: Widget sin estado que se renderiza igual siempre.
MaterialApp: Widget raíz que proporciona temas, rutas y más.
Scaffold: Implementa la estructura visual básica (barra de app, cuerpo, etc).
Center: Centra su hijo dentro del cuerpo.
Text: Muestra un texto.

Puedes modificar el texto, estilos y agregar más widgets para personalizar la UI.

4. Manejo básico de estado

Para apps dinámicas, el estado es clave. Usaremos el widget StatefulWidget para manejar cambios.

Ejemplo: Contador simple

import 'package:flutter/material.dart';

void main() => runApp(MiApp());

class MiApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Contador(),
    );
  }
}

class Contador extends StatefulWidget {
  @override
  _ContadorState createState() => _ContadorState();
}

class _ContadorState extends State<Contador> {
  int _contador = 0;

  void _incrementar() {
    setState(() {
      _contador++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contador Flutter'),
      ),
      body: Center(
        child: Text('Has presionado el botón $_contador veces',
          style: TextStyle(fontSize: 20)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementar,
        child: Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MiApp());

class MiApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Contador(),

);

}

class Contador extends StatefulWidget {

@override

_ContadorState createState() => _ContadorState();

}

class _ContadorState extends State<Contador> {

int _contador = 0;

void _incrementar() {

setState(() {

_contador++;

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Contador Flutter'),

body: Center(

child: Text('Has presionado el botón $_contador veces',

style: TextStyle(fontSize: 20)),

floatingActionButton: FloatingActionButton(

onPressed: _incrementar,

child: Icon(Icons.add),

);

}

¿Qué sucede aquí?

StatefulWidget permite variables que cambian (estado).
setState() notifica a Flutter que cambió el estado, recargando la pantalla.
El botón FloatingActionButton incrementa el contador.

Este patrón es básico para el desarrollo aplicaciones móviles Dart con Flutter.

5. Implementación de funcionalidades comunes

Veamos cómo implementar algunas funcionalidades básicas que toda app puede necesitar.

5.1 Navegación entre pantallas

Flutter utiliza un stack de rutas para navegar entre páginas.

// Pantalla Principal
class PantallaPrincipal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pantalla Principal')),
      body: Center(
        child: ElevatedButton(
          child: Text('Ir a segunda pantalla'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SegundaPantalla()),
            );
          },
        ),
      ),
    );
  }
}

// Segunda Pantalla
class SegundaPantalla extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Segunda Pantalla')),
      body: Center(
        child: ElevatedButton(
          child: Text('Volver'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

// Pantalla Principal

class PantallaPrincipal extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Pantalla Principal')),

body: Center(

child: ElevatedButton(

child: Text('Ir a segunda pantalla'),

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => SegundaPantalla()),

);

}

// Segunda Pantalla

class SegundaPantalla extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Segunda Pantalla')),

body: Center(

child: ElevatedButton(

child: Text('Volver'),

onPressed: () {

Navigator.pop(context);

);

}

5.2 Obtener datos desde formularios

class FormularioSimple extends StatefulWidget {
  @override
  _FormularioSimpleState createState() => _FormularioSimpleState();
}

class _FormularioSimpleState extends State<FormularioSimple> {
  final _controller = TextEditingController();
  String _valor = '';

  void _mostrarValor() {
    setState(() {
      _valor = _controller.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Formulario')), 
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Ingresa texto'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _mostrarValor,
              child: Text('Mostrar'),
            ),
            SizedBox(height: 20),
            Text('Texto ingresado: $_valor'),
          ],
        ),
      ),
    );
  }
}

class FormularioSimple extends StatefulWidget {

@override

_FormularioSimpleState createState() => _FormularioSimpleState();

}

class _FormularioSimpleState extends State<FormularioSimple> {

final _controller = TextEditingController();

String _valor = '';

void _mostrarValor() {

setState(() {

_valor = _controller.text;

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Formulario')),

body: Padding(

padding: EdgeInsets.all(16.0),

child: Column(

children: [

TextField(

controller: _controller,

decoration: InputDecoration(labelText: 'Ingresa texto'),

SizedBox(height: 20),

ElevatedButton(

onPressed: _mostrarValor,

child: Text('Mostrar'),

SizedBox(height: 20),

Text('Texto ingresado: $_valor'),

);

}

5.3 Mostrar listas dinámicas

class ListaDeTareas extends StatelessWidget {
  final List<String> tareas = ['Aprender Dart', 'Practicar Flutter', 'Crear apps increíbles'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lista de Tareas')),
      body: ListView.builder(
        itemCount: tareas.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: Icon(Icons.check_circle_outline),
            title: Text(tareas[index]),
          );
        },
      ),
    );
  }
}

class ListaDeTareas extends StatelessWidget {

final List<String> tareas = ['Aprender Dart', 'Practicar Flutter', 'Crear apps increíbles'];

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Lista de Tareas')),

body: ListView.builder(

itemCount: tareas.length,

itemBuilder: (context, index) {

return ListTile(

leading: Icon(Icons.check_circle_outline),

title: Text(tareas[index]),

);

}

Buenas prácticas para desarrollar aplicaciones Flutter exitosas

Mantén tu código organizado: Usa carpetas para separar lógica, widgets, modelos y recursos.
Usa const cuando sea posible: Aumenta el rendimiento.
Evita widgets anidados complejos: Divide en widgets más pequeños y reutilizables.
Aprovecha los paquetes: Explora paquetes en pub.dev para extender funcionalidad.
Prueba tu app frecuentemente: Usa hot reload y herramientas de testeo.

Conclusión

En este tutorial Flutter para principiantes, aprendiste desde la instalación del entorno, creación de una app básica, construcción de interfaces con widgets, manejo simple de estado y funcionalidades comunes como navegación, formularios y listas. Ahora estás listo para explorar y construir tus propias aplicaciones móviles con Dart y Flutter.

¿Qué sigue?

Profundiza en manejo avanzado de estado (Provider, Bloc)
Integra bases de datos locales y APIs
Personaliza temas y animaciones
Publica tu app en Google Play y App Store

¡Comienza hoy mismo a crear apps Flutter paso a paso y lleva tus ideas al mundo móvil con las herramientas modernas y eficientes que Flutter ofrece!

¿Te gustó este tutorial Flutter?

Comparte, comenta y sigue explorando con nosotros. ¡El desarrollo de aplicaciones móviles Dart nunca ha sido tan accesible!