Flutter + BloC + Back4App = Basic Chat App



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


  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

Create UI

  1. Login page:
login page
  • The full source code of the login page looks like this:
signup page
  • The full source code of signup page:
home page
  • The full source code of home page:

Create Repository:

  • User Repository: handle login/signup logic. This is the main class that interacts with the User class on Back4App.
  • Message Repository: the responsibility of this class is to manage the sending message process.

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:
  • AuthCubit:
  • LoginStates:
  • LoginCubit:
  • SignupStates:
  • SignupCubit:
  • HomeStates:
  • HomeCubit:




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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Web Performance for the People

How I solve coding challenges using The “Start small grow big” and “Think twice,code once” method

Mobile Web vs. Mobile App

Column or expression in SELECT list not valid exception

How to get into Game Development? Practical advices

A Guide On Laravel Relationships

An Important Month Resulting In Greatness

Automatically render Microsoft Teams Call Flow Diagrams

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Trong Dinh Thai Hoang

Trong Dinh Thai Hoang

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

More from Medium

How to add launcher/app icons to flutter

Easy way to implement User Session-Timeout feature in Flutter

Everything you need to know about Flutter 2.0

Flutter Authentication with Firebase.