To-Do App Using BLoC with MVC. Step 1: Add Dependencies Add the… | by Rohit surage | Jan, 2025

Step 1: Add Dependencies
Add the flutter_bloc package to your pubspec.yaml file:

dependencies:
flutter:
sdk: flutter
flutter_bloc: ^latest

Step 2: Create the BLoC To-Do App with MVC

Model:

class Task {
String name;
Task(this.name);
}

Events:

abstract class TaskEvent {}
class AddTaskEvent extends TaskEvent {
final String taskName;
AddTaskEvent(this.taskName);
}
class RemoveTaskEvent extends TaskEvent {
final int index;
RemoveTaskEvent(this.index);
}

States:

class TaskState {
final List tasks;
TaskState(this.tasks);
}

BLoC:

import 'package:flutter_bloc/flutter_bloc.dart';
import 'task_model.dart'; 
import 'task_event.dart';
import 'task_state.dart';
class TaskBloc extends Bloc {
TaskBloc() : super(TaskState([]));
@override
Stream mapEventToState(TaskEvent event) async* {
if (event is AddTaskEvent) {
final updatedTasks = List.from(state.tasks)..add(Task(event.taskName));
yield TaskState(updatedTasks);
} else if (event is RemoveTaskEvent) {
final updatedTasks = List.from(state.tasks)..removeAt(event.index);
yield TaskState(updatedTasks);
}
}
}

View:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'task_bloc.dart';
import 'task_event.dart'; 
import 'task_state.dart'; 
class TaskPage extends StatelessWidget {
final TextEditingController taskController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('BLoC To-Do App')),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: taskController,
decoration: InputDecoration(labelText: 'Enter Task'),
),
),
ElevatedButton(
onPressed: () {
if (taskController.text.isNotEmpty) {
context.read().add(AddTaskEvent(taskController.text));
taskController.clear();
}
},
child: Text('Add Task'),
),
Expanded(
child: BlocBuilder(
builder: (context, state) {
return ListView.builder(
itemCount: state.tasks.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(state.tasks[index].name),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
context.read().add(RemoveTaskEvent(index));
},
),
);
},
);
},
),
),
],
),
);
}
}

Main:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'task_bloc.dart'; 
import 'task_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BLoC To-Do App',
home: BlocProvider(
create: (context) => TaskBloc(),
child: TaskPage(),
),
);
}
}