Crear una app de lista de tareas es uno de los mejores proyectos para comenzar con Flutter. Es simple, pero te permite trabajar con interfaces, manejo de estado, inputs del usuario y almacenamiento de datos.
En este tutorial te mostraré cómo crear una app básica de To-Do en Flutter, paso a paso.
Requisitos previos
Tener instalado Flutter SDK y un editor (como VS Code o Android Studio).
Conocimientos básicos de Dart y Flutter.
Emulador o dispositivo físico para pruebas.
Paso 1: Crear el proyecto
Abre tu terminal y ejecuta:
flutter create todo_app
cd todo_app
Abre el proyecto en tu editor preferido.
Paso 2: Estructura básica de la app
Abre el archivo lib/main.dart y reemplaza su contenido por lo siguiente:
import 'package:flutter/material.dart';
void main() {
runApp(ToDoApp());
}
class ToDoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To-Do App',
theme: ThemeData(primarySwatch: Colors.blue),
home: ToDoListScreen(),
);
}
}
Paso 3: Crear la pantalla principal
Vamos a mostrar una lista de tareas y un campo para agregar nuevas.
class ToDoListScreen extends StatefulWidget {
@override
_ToDoListScreenState createState() => _ToDoListScreenState();
}
class _ToDoListScreenState extends State<ToDoListScreen> {
final List<String> _tasks = [];
final TextEditingController _controller = TextEditingController();
void _addTask() {
if (_controller.text.trim().isEmpty) return;
setState(() {
_tasks.add(_controller.text.trim());
});
_controller.clear();
}
void _removeTask(int index) {
setState(() {
_tasks.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('My To-Do List')),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(labelText: 'New task'),
),
),
IconButton(
icon: Icon(Icons.add),
onPressed: _addTask,
)
],
),
),
Expanded(
child: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) => ListTile(
title: Text(_tasks[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => _removeTask(index),
),
),
),
)
],
),
);
}
}
---
Paso 4: Ejecuta y prueba
Conecta tu emulador o dispositivo y corre la app:
flutter run
Prueba agregar, visualizar y eliminar tareas.
---
Paso 5 (Opcional): Guardar las tareas localmente
Para guardar tareas incluso después de cerrar la app, puedes usar el paquete shared_preferences. ¿Te gustaría que te muestre cómo agregar persistencia local?
¿Te gustaría que prepare la continuación con persistencia de datos o alguna mejora visual (dark mode, animaciones, etc.)?
Comentarios