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

Chakra-UI Crash Course

C# Beginner

Bluetooth Mesh: Technology Overview, Examples, Alternatives, and First-Hand Experience

Check a matrix is sparse matrix or not in Python?

All my calendars in one place

Declaration of Homestead

Spell check your Erlang code with Sheldon

The Best and Worst Feedback You Can Get

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

Introduction to Flutter

Flutter Live Data Tutorial

How to Integrate Ortho in Your Flutter App

Input formatters in Textfield Flutter