Flutter, how to create a Todo app using firebase firestore and firebase authentication with GetX [Part 1].
A few months ago, I discovered an amazing package that will change how I write Flutter app, this package is GetX. From the readme, the author Jonny Borges says:
GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.
As mentioned by the author there are ton features inside this package, from route management to dependency Injection through state management. To explores those features I decided to build a Todo App, but you know what? connected to Firebase and saved in Firestore. So once the user connects with google sign in or email, we list all his tasks, he can add/edit and toggle the status of a task in realtime! This is a demo of what we are going to build in this tutorial.
I. Creating flutter project
You might already know how to do that, but for those who don’t yet know, open your command line and run the above command to create my project named todo_getx and com.loicngou.todo_getx as a package id:
flutter create --org com.loicngou todo_getx1. Installing dependencies
For this project, this is how your pub.yaml file should look like :
get: ^3.1.1 // the core of GetX package
firebase_core: ^0.4.5
firebase_auth: ^0.16.1 // For firebase authentication
google_sign_in: ^4.5.1 // For google sign in
cloud_firestore: ^0.13.7 // To store user tasks in firestore2. Adding Firebase to your project
To add Firebase to your app just follows the firebase documentation here. To support google sign in, you will be asked to enter the sha1 key, Go to the project folder in the terminal.
Mac keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
Windows keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
II. Diving into the App
1.Project Structure
Most tutorials don’t treat the most important part when developing an application, that is the project structure. you know when writing an app you should keep in mind that it may grow, someone else could work on, etc. some we have to organize our app more clear, readable as possible.
As you can see I organized files per feature, each feature has his own set of folders/files depending on the purpose each one. for this app, I have two (02) folders, auth & todo folders:
- auth: it will hold all stuff related to Authentication in my app. we have auth.controller.dart file responsible for giving data to views and auth.service.dart responsible for communicating with external services and passing data to the controller. we also have commons folders as models and views that hold all views related to authentication.
- todo: same structure as auth depending on needs.
2. Developing App
We are going to use GetX package a route manager, in order to that, instead of writing MaterialApp we are going to use GetMaterialApp.
Am going to use named routes, so I have to specify them,
2.1 Authentication feature
We are going to support email sign in, google sign in and registering, for that I created an auth.service.dart file inside the auth folder, each function there is clearly specified.
For the auth.controller.dart file, we will create the AuthController class that extends GetxController that will give access to some Controller lifecycle method as onInit and onClose. here are variables of AuthController class:
static AuthController to = Get.find(); // that allow us to retrieve the AuthController instance everywhere in our app by typing AuthController.to,RxBool isLogged = false.obs; // it is an observable boolean that //check whether the user is logged in or not.TextEditingController emailController; // to handle sign in /upTextEditingController passwordController;// to handle sign in /upAuthService _authService; // Injecting authentication service classRx<FirebaseUser> user = Rx<FirebaseUser>(); //observable of The //current authenticated user or null
In the onInit method, we observe the authentication state, and if the user login he is redirected to the home page if he signout we redirect the user to the login page.
@overridevoid onInit() async {ever(isLogged, handleAuthChanged); // with the ever worker, whenever the isLodded variable changes, handleAuthChanged is calleduser.value = await _authService.getCurrentUser();isLogged.value = user.value != null;_authService.onAuthChanged().listen((event) {isLogged.value = event != null;user.value = event;}); //we observe the authentication state.emailController = TextEditingController();passwordController = TextEditingController();super.onInit();}
HandleAuthChanged method redirects the user to home or login depending if he is logged in or not.
handleAuthChanged(isLoggedIn) { if (isLoggedIn == false) { Get.offAllNamed("/login"); } else { Get.offAllNamed("/"); }}
Check the auth.controller.dart file to see other methods:
The login view is pretty simple, we retrieve the authController instance and on sign in button clicked we call authController.hanadleSignIn method
It is the same for the register view.
See us in part two to implement the todo module, if you want the complete code, here is the GitHub link .
Left a clap if you enjoyed it.thanks.
