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.
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:
- Setup a new app on Back4App with Live Query enabled.
- Create UI for 3 pages: login, signup, and home page.
- Create Repository.
- 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
Create UI
- Login page:
- The full source code of the login page looks like this:
2. Signup page:
- The full source code of signup page:
3. Home page:
- The full source code of home page:
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.
- Message Repository: the responsibility of this class is to manage the sending message process.
Business Logic (BloC)
- Auth BloC: Our
AuthCubit
is responsible for receiving events and converting them intoAuthStates
. It will have a dependency onUserRepository
so that it can retrieveParseUser
when the app started.
- AuthStates:
- AuthCubit:
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:
- LoginCubit:
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:
- SignupCubit:
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:
- HomeCubit:
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.