BloC Pattern For Login: cubit_login in Flutter
Before beginning, you can see the updated state management version of this app in part 2: https://medium.com/@sahinefe/cubit-freezed-combination-to-manage-the-state-powerfully-in-flutter-2022-version-e64339e7c641
PART1
Login App, but Why is it?
First things first, If you are familiar with app development, you can understand why is it. If you are not, let me explain it.
When people start the app development, they create such apps, such as Login app, To-Do app, sometimes mini-games, etc. By creating these apps, people can easily catch to the logic of the coding.
Why am I creating cubit_login? Am I unexperienced person?
Of course, I am not. I created the cubit_login because I noticed that, there are such apps about login, but people who create auth apps, only create email and password fields. There are no apps that are totally finished. So, last week, I decided to create an app that provides a lot of properties. Let’s get started cubit_login.
cubit_login
cubit_login is a Flutter project which is created by Bloc/Cubits. The differ from the other login projects, this project has social login instances and sign-up properties. Additionally, this project has a landing page. When you open the app, firstly it controls the auth statement. If you have already logged in, the home page will start, but if you have not, then you will start the sign-in page.
Before the glance at cubit_login codes, let’s look its properties generally.
- State Management: Cubit
- Sign In Methods: Email/Password, Google, Github, Twitter, Apple, and Microsoft
- Reset Password: You can reset your password via email.
- Snackbars: If you do something successfully, or If you get an error, then the snackbar will appear bottom of the app.
- Validators: When you try to sign up to the app, If you enter something’s wrong, then you can not sign up. Below of the inputs, it shows the error.
Some Gifs and Screenshots from the app:
Now, we can glance at the codes which are mentioned above by me.
Packages
Before starting, firstly I want to show packages which are used by me.
I think all of them were useful packages, so I used them.
File Structure
If you want to write clean codes, you need to prepare a clean file structure. I will not mention why I prepared the structure like this, because there is a useful resource which is prepared by Erkan Sahin. You can glance them from here.
You can see the structure, it seems simple, right? Let’s explain what i did.
- Firstly, in the application part of the cubit_login, there are state management files (cubits).
- Next, in the domain part of the cubit_login, there are my auth models such as email, password, name (Name Surname section for sign up), and text field.
- Finally, in the presentation part of the cubit_login, there are ui files of the app like forms, buttons, etc.
Let’s explain step by step the codes.
Application Folder
As I mentioned above, the application folder has state management files. If we expand it, we can see this:
Under the application folder, there are some files and folders. Auth files for authentication in the app. If you have already signed in, or If you are not login the app, you see the home page or login page according to your authentication.
The login folder has login authentication functions, and likewise, sign up folder has signed up functions for signing up. Firstly, let’s look at some codes of the login cubit file.
Here we can see emailChanged and passwordChanged functions. They catch the changes when the user enters his/her email and password. If they are not valid, according to this, it shows an error. Additionally, I used the Formz functions from the package to control the inputs.
What is the performLogin function? Actually, this function coming from FirebaseOAuth. It provides the different login options for us. Because of this, I like the firebase_auth_oauth package.
Here we can see the two login methods. I do not share all of the codes, but at the end of the article I will share the project Github link.
Firstly, we emit the state to try-catch blocks. Because these methods are async, when the user waits, the user can see CircularProgressIndicator(). Next, If codes that are in the try block works fine, then the CircularProgressIndicator() does not show. At the same time, If there is a problem, snackbars appear for showing errors to the user.
Here is our login state for login cubit. We use the Equatable package for comparing. Finally, we defined copyWith for updating the data.
Domain Folder
Here we have authentication models for login and sign up. Let’s look at one of them (email.dart)
We use lots of properties of the Formz package. I just control the inputs with regex, if they are valid or not.
Presentation Folder
This folder actually has UI files of the app such as pages, widgets, forms.
The presentation folder is divided into three folders. All files have the same logic except landing_page. When the app starts, it creates the first landing page, because it controls is user login or not as I mentioned above.
Mini Notes for cubit_login
If you want to use Apple sign-in and Twitter sign-in methods, you need to configure them from firestore. Twitter and Apple must give developer permits to you.
You can find all of the codes here. I hope that this tutorial helps you understand how you should use cubit_login. Feel free to ask any questions in the comments section.
Thank you for reading, stay tuned!
