Por supuesto, te proporcionaré un tutorial básico sobre cómo crear un proyecto en Flutter desde cero con ejemplos de código. En este tutorial, utilizaremos Flutter para crear una aplicación de lista de tareas simples. Seguiremos los siguientes pasos:

  1. Configurar Flutter y el entorno de desarrollo.
  2. Crear un nuevo proyecto de Flutter.
  3. Diseñar la interfaz de usuario.
  4. Implementar la funcionalidad básica de la lista de tareas.

Paso 1: Configurar Flutter y el entorno de desarrollo

Siga la guía oficial de Flutter para configurar Flutter y el entorno de desarrollo en su máquina: https://flutter.dev/docs/get-started/install

Paso 2: Crear un nuevo proyecto de Flutter

  1. Abra su terminal o línea de comandos y ejecute el siguiente comando para crear un nuevo proyecto de Flutter:
flutter create lista_tareas_app
  1. Navegue al directorio del nuevo proyecto:
cd lista_tareas_app

Paso 3: Diseñar la interfaz de usuario

Abra el archivo lib/main.dart y reemplace el código existente con el siguiente:

import 'package:flutter/material.dart';

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

class ListaTareasApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lista de Tareas',
      home: ListaTareasScreen(),
    );
  }
}

class ListaTareasScreen extends StatefulWidget {
  @override
  _ListaTareasScreenState createState() => _ListaTareasScreenState();
}

class _ListaTareasScreenState extends State<ListaTareasScreen> {
  List<String> _tareas = [];

  void _agregarTarea(String tarea) {
    setState(() {
      _tareas.add(tarea);
    });
  }

  @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(
            title: Text(_tareas[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              String nuevaTarea = '';
              return AlertDialog(
                title: Text('Nueva Tarea'),
                content: TextField(
                  onChanged: (value) {
                    nuevaTarea = value;
                  },
                ),
                actions: [
                  ElevatedButton(
                    onPressed: () {
                      _agregarTarea(nuevaTarea);
                      Navigator.pop(context);
                    },
                    child: Text('Agregar'),
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Paso 4: Implementar la funcionalidad básica de la lista de tareas

En este ejemplo, hemos creado una aplicación de lista de tareas simple que muestra una lista de tareas agregadas por el usuario. El usuario puede agregar nuevas tareas haciendo clic en el botón flotante.

Ejecuta el proyecto usando el siguiente comando:

flutter run

Ahora debería ver una aplicación de lista de tareas simple en su emulador o dispositivo Android/iOS.

Este es solo un tutorial básico para empezar con Flutter. Puedes expandir este proyecto añadiendo más características como eliminar tareas, marcar tareas como completadas, agregar fecha límite, etc. ¡Espero que encuentres útil este tutorial!

Categories:

Tags:

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *