Tutorial de Flutter – Creación de una Aplicación de Lista de Tareas

Tiempo de lectura: 2 minutos

Una lista de tareas es una aplicación útil para organizar tareas pendientes y puede ser un excelente proyecto de aprendizaje para quienes desean iniciarse en Flutter.

Título: Tutorial de Flutter – Creación de una Aplicación de Lista de Tareas

Objetivo: En este tutorial, aprenderemos a crear una aplicación de lista de tareas simple utilizando Flutter, lo que te permitirá organizar tus tareas pendientes de manera efectiva.

Nivel de Dificultad: Intermedio

Herramientas necesarias: Flutter instalado en tu sistema, un editor de código (como Visual Studio Code) y un emulador de dispositivo o un dispositivo físico para probar la aplicación.

Paso 1: Configurar el entorno de desarrollo

Asegúrate de tener Flutter instalado en tu sistema siguiendo la documentación oficial de Flutter.

Paso 2: Crear un nuevo proyecto Flutter

Abre tu terminal y ejecuta los siguientes comandos para crear un nuevo proyecto Flutter:

flutter create lista_de_tareas_app
cd lista_de_tareas_app

Paso 3: Diseñar la interfaz de usuario

En el archivo lib/main.dart, reemplaza el código con el siguiente código que define la interfaz de usuario de nuestra aplicación de lista de tareas:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lista de Tareas',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoList(),
    );
  }
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  List<String> todos = [];
  TextEditingController todoController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lista de Tareas'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: todoController,
              decoration: InputDecoration(
                hintText: 'Nueva tarea',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                todos.add(todoController.text);
                todoController.text = '';
              });
            },
            child: Text('Agregar Tarea'),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(todos[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Paso 4: Ejecutar la aplicación

Ejecuta la aplicación en tu emulador o dispositivo físico utilizando el siguiente comando en la terminal:

flutter run

Paso 5: Prueba la aplicación

Abre la aplicación en tu dispositivo y comienza a agregar tareas a tu lista. Puedes agregar, editar y eliminar tareas de la lista.