Flutter + BloC + Back4App = Basic Chat App

In the following tutorial, we’re going to build a Basic Chat App in Flutter which uses blocs to manage state and back4app as the server-side. This video shows a demo when you complete.

https://www.youtube.com/watch?v=qUvI0D1rmwc

Want to read this story later? Save it in Journal.

Requirements:

• This tutorial requires you need to know BloC knowledge. If not, please read this document first. [EDITED: new bloc version has been supported in this tutorial]

Direction:

1. Setup a new app on Back4App with Live Query enabled.
2. Create UI for 3 pages: login, signup, and home page.
3. Create Repository.
4. Create Business Logic (BloC) for each page.

Setup a new app on Back4App:

• Back4App is a flexible and scalable platform based on the Parse platform.
• Create New App: Back4App-Demo

• Copy application configs to main.dart

App Settings on Back4App

Enable Live Query in Server Settings

main.dart

Create UI

1. Login page:

login page

• The full source code of the login page looks like this:

login.dart

2. Signup page:

signup page

• The full source code of signup page:

signup.dart

3. Home page:

home page

• The full source code of home page:

home.dart

If you take a look at this home.dart, you will see the important function of this screen is _handleLiveQuery() . This function is one of the nice features of Back4app, it handles all transferring messages.

Create Repository:

• User Repository: handle login/signup logic. This is the main class that interacts with the User class on Back4App.

user_repos.dart

• Message Repository: the responsibility of this class is to manage the sending message process.

message_repos.dart

Business Logic (BloC)

1. Auth BloC: Our AuthCubit is responsible for receiving events and converting them into AuthStates. It will have a dependency on UserRepository so that it can retrieve ParseUser when the app started.

• AuthStates:

auth_states.dart

• AuthCubit:

auth_bloc.dart

2. Login BloC: Our LoginCubit is responsible for receiving events and converting them into LoginStates. It will have a dependency on UserRepository so that it can retrieve the ParseUser when user inputs username, email, and password.

• LoginStates:

login_states.dart

• LoginCubit:

login_bloc.dart

3. Signup BloC: Our SignupCubit is responsible for receiving events and converting them into SignupStates. It will have a dependency on UserRepository so that it can retrieve the ParseUser when user inputs username, email, and password.

• SignupStates:

signup_states.dart

• SignupCubit:

signup_bloc.dart

4. Home BloC: Our HomeCubit is responsible for receiving events and converting them into HomeStates. It will have a dependency on MessageRepository so that it can send the Message when a user presses the send button.

• HomeStates:

home_states.dart

• HomeCubit:

home_bloc.dart

I hope you enjoy this tutorial. All source code is available at https://github.com/mroom-software/flutter_bloc_chat_back4app. Feel free to contact me via trongdinh@mroomsoft.com if there is any problem.

The next tutorial that will teach you how to write a unit test is available here.

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.