Flutter BLoC Update List

Here I will share my experience with Flutter BLoC updating a list. This is actually crud operation. If you have never worked with BLoC List update, it's scary.

At the same time, I will share what to notice.

The story started when I built a Riverpod Task management (todo app), and later I wanted to convert it to BLoC app.

This is due to I love to experiment with different technology. I love Getx, BLoC and Riverpod. I love to built the same app using different technology.

There are lot of the tutorials they talk about List update, just updating a List without any state management it self is easy. But as your app grows bigger and complex, simple List update does not reflect your changes on the UI.

This is where, you need to use a state management, with a List. I will demonstarte a CRUD example. Let's first see adding an item to the List.

Our List would save custom data type.

State class

First we have to know our state class. We will use the below state class to work in this example. TaskStates would be refered from the UI and BLoC to access the shared data.

That means all the variables in the TaskStates would be available too.

abstract class TaskState extends Equatable {
  const TaskState();

  @override
  List<Object?> get props => [];
}

class TaskStates extends TaskState {
  final int taskId;
  final bool? ui;
  final Task? task;
  final Task? delTask;
  final Task? updateTask;
  final List<Task> allTask;

  const TaskStates(
      {this.task,
      this.allTask = const <Task>[],
      this.delTask,
      this.ui,
      this.taskId = 0,
      this.updateTask});

  TaskStates copyWith(
      {Task? task, List<Task>? allTask, Task? delTask, bool? ui, int? taskId, Task? updateTask}) {
    return TaskStates(
      task: task ?? this.task,
      allTask: allTask ?? this.allTask,
      delTask: delTask ?? this.delTask,
      ui: ui ?? this.ui,
      updateTask: updateTask??this.updateTask
    );
  }

  @override
  List<Object?> get props => [task, allTask, delTask, taskId, updateTask];
}

Our List would hold custom Item Task. Task is model.

Adding an item

Here we want to add item to our List. Our list is allTask as you can see from the above code. In the below picture the first line adds an item and then trigger a event. The second line triggers the event.

After trigger the event, the below code is executed. You may see it from the below picture.

Adding an item is relatively easy and we will use any methods that's offered by dart List object.

You see we have res variable which stores all the values from list in the state variable. res provides a method add().

Once _triggerTask() is triggered from the UI, we pass our data by triggering event and the data is sent inside event variable.

We take the data from the event object and add to res List. And then the we simply emit a state, saying that new data is available in the shared state of BLoC.

From the state class TaskStates you may see the allTask a a variable.

One of the thing, you have to do

You might have to refresh your List if you Sqlite for storing data

You may I refresh my SQlite in the in the picture. It's the refresh() function. It's a custom function to refresh the data List.

In general, if you just want to add a item to a List, it's fine. But if you want to save the item to storage like SQlite or other storage, you might have to create your own refresh() function.

Unlinke Getx, BLoC does not provide any refresh() function to update a List.

..........coming more.........