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.

I’m a peaceful person who wants to make friend with people around the world.