Dhrubok Infotech Services Ltd.

Flutter GetX Login: Login Implementation Using GetX Package

Taqi Tahmid Tanzil
Taqi Tahmid Tanzil
flutter getx login
Flutter is one of the largest growing technology stack for mobile application development. It is also one of the top in learning according to Github. Though Flutter is easier than other development kit in many ways, state management is one of the most crucial factors. Every developer faces a lot of issues when they have to implement state management in a larger project. A common problem is choosing a perfect way of state management as there are many libraries for implementing it. A common approach is to choose one which serves best according to the project. Though Bloc is recommended by Google, GetX is one of the easiest and most popular among the state management libraries. GetX package has ranked top 3rd in state management libraries. GetX package is powerful, has less boilerplate code and is convenient to implement. 

Flutter GetX Login Operation Example Explained

In this article, we will show a simple project of Flutter GetX login operation. This project will consist –
  1. A splash screen
  2. A login form for which will take email and password as input
  3. A list of content when users successfully log in
We will basically use some basic components for implementing the project –
  1. GetX pack () 
  2. Splash screen
  3. Reqres for login API
  4. HTTP package for networking operation
First, let’s open a fresh Flutter project maintaining all the necessary setup and SDK. For that, the first thing to do is to add the dependencies in the pubspec.yaml file. The file structure for the project will be like the screenshot below. we will discuss the file description later.
In this file structure, the full project has separated into different directories like API, common components, controllers, model etc.
  1. API folder contains API related files
  2. Common components contains widget which will be used through the project
  3. Controllers are GetX controllers
  4. Models are used as model class for network operation
  5. Screens will contain UI pages
  6. Util contains some basic operation classes like network check, constant files etc.
Enough with chitchat, let’s jump into code. Full project Github link is given below, here we will only discuss the specific files in steps.
  1. Main.dart: this is the main file for any Flutter application. As we have already added our necessary files for GetX and other things in pubspec.yaml file, we can use these components here. We will wrap the whole app in “GetmaterialApp” widget so that we can use all the features of GetX in project.
  2. SplashScreen: Second step is adding a splash screen for the app. In this page we will check our network availability using the flutter_connectivity package. If a network is available then we will let the user go to the login form. Otherwise an alert dialog will pop-up which will notify the user to turn on the internet.
  3. Login page: if everything goes well, the user will see a login form. user can put login credentials and log into the system. A JWT will generate when the user successfully logs in. We store the JWT using flutter_storage library. The text fields take input from the user and call the relevant API to login the user.
  4. Controller classes: There are two controller classes in this project. Controllers are one of the main components of the GetX packages. All the business operations are done in this class. UI pages are connected with controller classes using objects declared previously in respective files. 
  5. Home class: when a user logs in the system, they will see some people along with name and photo. They can also delete an user from that list. List will populate using JWT and API from reqres. Full list is observable using GetX obs. 
That’s it! This is the basic project for using GetX. The code itself will explain how much easier and efficient it is to use as a state management method. it can be more efficient in more ways when someone gets the basics of the powerful GetX package.  Full source code live here : Github

Subscribe to Our Newsletter

Let’s stay in touch.

Next

Have an idea in mind?

Message us on...

Facebook Twitter Linkedin Instagram