Flutter CRUD (Create, Read, Update, Delete) app with complete examples

Flutter CRUD (Create, Read, Update, Delete) app with complete examples

For this tutorial, I’ll assume you have some basic knowledge of Flutter and Dart programming. If you’re new to Flutter, consider going through the official Flutter documentation and introductory tutorials first.

In this tutorial, we’ll create a simple CRUD app for managing a list of tasks. You’ll be able to add, view, update, and delete tasks using a Flutter app.

Step 1: Set Up Your Flutter Project

First, make sure you have Flutter installed on your machine. You can follow the instructions on the official Flutter website to get started: https://flutter.dev/docs/get-started/install

Create a new Flutter project using the following command:

flutter create flutter_crud_app

Navigate to the project directory:

cd flutter_crud_app

Step 2: Create the Task Model

Create a file named task.dart inside the lib directory. Define a Task class that will represent our tasks:

class Task {
  int id;
  String title;
  bool completed;

  Task({required this.id, required this.title, required this.completed});
}

Step 3: Create the Task Provider

Create a file named task_provider.dart inside the lib directory. In this file, define a TaskProvider class that will handle CRUD operations for tasks:

import 'task.dart';

class TaskProvider {
  List<Task> tasks = [];

  void addTask(Task task) {
    tasks.add(task);
  }

  List<Task> getTasks() {
    return tasks;
  }

  void updateTask(Task task) {
    // Find and update the task
    int index = tasks.indexWhere((t) => t.id == task.id);
    if (index != -1) {
      tasks[index] = task;
    }
  }

  void deleteTask(int taskId) {
    tasks.removeWhere((task) => task.id == taskId);
  }
}

Step 4: Create the Task Form

Open the lib/main.dart file and replace the existing code with the following:

import 'package:flutter/material.dart';
import 'task.dart';
import 'task_provider.dart';

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

class MyApp extends StatelessWidget {
  final TaskProvider taskProvider = TaskProvider();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CRUD App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: TaskListScreen(taskProvider: taskProvider),
    );
  }
}

class TaskListScreen extends StatelessWidget {
  final TaskProvider taskProvider;

  TaskListScreen({required this.taskProvider});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Task List')),
      body: ListView.builder(
        itemCount: taskProvider.getTasks().length,
        itemBuilder: (context, index) {
          Task task = taskProvider.getTasks()[index];
          return ListTile(
            title: Text(task.title),
            trailing: Checkbox(
              value: task.completed,
              onChanged: (value) {
                taskProvider.updateTask(task.copyWith(completed: value));
              },
            ),
            onTap: () {
              // Open task details screen
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => TaskDetailScreen(
                    task: task,
                    taskProvider: taskProvider,
                  ),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Open add task screen
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddTaskScreen(taskProvider: taskProvider),
            ),
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class TaskDetailScreen extends StatelessWidget {
  final Task task;
  final TaskProvider taskProvider;

  TaskDetailScreen({required this.task, required this.taskProvider});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Task Detail')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(task.title, style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            Checkbox(
              value: task.completed,
              onChanged: (value) {
                taskProvider.updateTask(task.copyWith(completed: value));
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                taskProvider.deleteTask(task.id);
                Navigator.pop(context); // Go back to the task list screen
              },
              child: Text('Delete Task'),
            ),
          ],
        ),
      ),
    );
  }
}

class AddTaskScreen extends StatefulWidget {
  final TaskProvider taskProvider;

  AddTaskScreen({required this.taskProvider});

  @override
  _AddTaskScreenState createState() => _AddTaskScreenState();
}

class _AddTaskScreenState extends State<AddTaskScreen> {
  late TextEditingController _titleController;

  @override
  void initState() {
    super.initState();
    _titleController = TextEditingController();
  }

  @override
  void dispose() {
    _titleController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Add Task')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            TextField(
              controller: _titleController,
              decoration: InputDecoration(labelText: 'Task Title'),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                if (_titleController.text.isNotEmpty) {
                  Task newTask = Task(
                    id: DateTime.now().millisecondsSinceEpoch,
                    title: _titleController.text,
                    completed: false,
                  );
                  widget.taskProvider.addTask(newTask);
                  Navigator.pop(context); // Go back to the task list screen
                }
              },
              child: Text('Add Task'),
            ),
          ],
        ),
      ),
    );
  }
}

In this example, we’ve created four screens:

1. TaskListScreen: Displays the list of tasks. You can mark tasks as completed and tap on a task to view its details or delete it.
2. TaskDetailScreen: Displays the details of a selected task and allows you to mark it as completed or delete it.
3. AddTaskScreen: Allows you to add a new task.

Step 5: Run Your App

You can run your Flutter app using the following command:

flutter run

This should launch your app in the simulator or on a connected device. You’ll be able to add, view, update, and delete tasks using the app’s interface.

Please note that this is a basic example to get you started with CRUD operations in Flutter. You can further enhance and customize the app based on your requirements, such as adding persistence using a database, better UI/UX, error handling, and more advanced features.

Remember to always refer to the official Flutter documentation for more in-depth explanations and guidance: https://flutter.dev/docs