Flutter + BloC + Back4App = Basic Chat App

Trong Dinh Thai Hoang

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

Requirements:

  • This tutorial requires you need to know BloC knowledge. If not, please read this document first.

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 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

Create Repository:

  • User Repository: handle login/signup logic. This is the main class interacts to 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 AuthBloc is responsible for receiving AuthEvents and converting them into AuthStates. It will have a dependency on UserRepository so that it can retrieve the ParseUser when the app started.
  • AuthEvents:
auth_events.dart
  • AuthStates:
auth_states.dart
  • AuthBloc:
auth_bloc.dart

2. Login BloC: Our LoginBloc is responsible for receiving LoginEvents 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.

  • Login Events:
login_events.dart
  • Login States:
login_states.dart
  • Login Bloc:
login_bloc.dart

3. Signup BloC: Our SignupBloc is responsible for receiving SignupEvents 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.

  • Signup Events:
signup_events.dart
  • Signup States:
signup_states.dart
  • Signup Bloc:
signup_bloc.dart

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

  • Home Events:
home_events.dart
  • Home States:
home_states.dart
  • Home Bloc:
home_bloc.dart

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.

Trong Dinh Thai Hoang

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade