BLoC Pattern for flutter -Part 3

If you haven’t read 1st Part and 2nd Part please read it so that we will be in Sync.

Part 1: BLoC Pattern for flutter -Part 1

Part 2: BLoC Pattern for flutter -Part 2

In this part we will continue our Notes app from part-2.

We already have display note functionality.

We will now do add Note functionality.

First Step: Let’s see which events we need.

1. AddNoteEvent //for adding note
2. OpenAddNoteUiEvent // for opening AddNote screen

Our note.event.dart class will look like this

Second Step: Let’s see which states we need.

AddingNoteInProgressState //  to show progress bar
AddingNoteCompleteState // to show complete status

Our note.state.dart will look like this

We got events and states. Let’s work on bloc.

We have to add these lines

else if (event is AddNoteEvent) {
  yield AddingNoteInProgressState();
  noteStorage.notes.add(event.noteModel);
  yield AddingNoteCompleteState();
  List<NoteModel> notes = noteStorage.notes;
  yield FetchingNoteCompleteState(notes);
}

First we are sending state for loading that is AddingNoteInProgressState because adding note may take time. Till it add up we will show progress bar to users.

noteStorage.notes.add(event.noteModel); will add a note into existing notes list which in in noteStorage class. Once note is added, we will send AddNoteCompleteState to notify user that note is added successfully.

Now our note.bloc.dart look like this

We got out new states, events and bloc. Let’s build UI now.

Create a new file as note.add.ui.dart and in this we will add two textfields for title and description and one button for adding note as AddNote. AddNote button will be replaced by CircularProgressIndicator if we have loading state.

Our note.add.ui.dart will look like above.

We have to change our main.dart to help new changes.

We have two screens which are having blocs. So for that we have to use MultiBlocProvider. It have providers parameter which take list of bloc providers. We will have old bloc plus new bloc for addNote.

After this our main.dart will look like this.

One more change we need to do that is in note.ui.dart we have to add one button which will open a new view for add note.

For sake of simplicity let’s add a IconButton in appbar as in actions.

actions: <Widget>[
  IconButton(
    onPressed: () {
      noteBloc.dispatch(OpenAddNoteUiEvent(context));
    },
    icon: Icon(Icons.add),
  )
],

After this note.ui.dart will look like this.

If there is any error you are facing then please visit github repository for reference.

Let’s run our app. And follow steps

1. Click on add icon in appbar to navigate add note screen.
2. Enter title
3. Enter description
4. Click on add button to add.
5. go back and see if we can see our new note in list.

(To see notes click on Floating action button)

These are screenshots from my side.

Yeah!! We have implemented add note using bloc pattern in our flutter app.

This is october. I would love to see if anyone out there can implement following features and contribute to community. I would love to accept pull request. #hacktoberFest

1. Update Note
2. View Note Details

This is our beloved repository link : Flutter For People Repository.

Let me know if you find difficult to do this. I would love to solve your problems.

Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon

#HappyCoding #flutter #bloc #hacktoberfest #tutorial

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.