In this article, we are going to discuss Getx in Flutter, how to use Getx and fetch API with GetX and manage the state of our application with Getx.

The final application will look as follows:

As you can see, when the app first runs we shall see the loading indicator when the data is being fetched from the server. And when they loaded we are showing them in the list.

Step 1: Add the dependencies

For that we shall be using some packages:

dependencies:

  // other dependencies
  get: ^4.6.5
  http: ^0.13.5

Step 2: Creating the model

First, Let’s have a look at our json now. We are using the API from this link. As you can see the json from the link above, it gives us an idea of how our model should look like. From this json we are going to have the property of the data tag. Here we are going to focus on firstname, lastname, email and avatar.

After having the API structure let’s get back to our project and create a new folder inside the lib folder named model. And inside the model folder create the new file named user_model.dart.

class UserModel {
  int? id;
  String? email;
  String? firstName;
  String? lastName;
  String? avatar;

  UserModel({this.id, this.email, this.firstName, this.lastName, this.avatar});

  UserModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    email = json['email'];
    firstName = json['first_name'];
    lastName = json['last_name'];
    avatar = json['avatar'];
  }
}

Step 3: Creating the controller

Now moving ahead, we need to create a mechanism to fetch the data from the server using the API endpoint. To perform the HTTP operations we now create a new folder inside lib folder and name it controller. Inside the controller folder, we now create a new file named user_controller.dart.

GetX separates the UI from the business logic. This is where GetX Controller comes into play. You can have more than one controller in your application depending upon the size of the project.

The Gext Controller class is responsible to control the state of the UI. You can wrap the individual widget with its Observer so that it only gets updated or rebuild only when there is change in the state of that particular widget.

Working Mechanism of Getx

As you can see in the image above, Getx follows the MVC pattern. Model where we have our data. Controller where we get and update our data. And lastly the View is the Widget in Flutter where we our data is going to be visible. The Getx works as follows:

• First the view, calls the Controller and listens it.
• The controller now calls the functions that are defined inside it and call the http response.
• When the http operations is success, the model returns to controller with the data.
• After getting the data the controller now updates the data into the observable variables and notifies the UI.
• After getting notified the UI gets rebuilds.

We now create the new class named UserController and it extends the GetxController.

class UserController extends GetxController {}

Next we add some variable to store our data and the state.

Normally we add the variable as follows:

List<UserModel> userList = [];
bool isLoading=false

But when using the GetX and make the variable reactive and obaservable we need to add obs at the end of the value. Then we the state or data of the variable changes, other parts of the application that depends on the value of that variable will be notified. So our initialized value in Getx will look as follows:

var userList = <UserModel>[].obs;
var isLoading = true.obs;

Then we create the a new method named getUsers

Future<void> getUsers() async {
    const String userUrl = "https://reqres.in/api/users?page=2";
    final response = await http.get(Uri.parse(userUrl));
    if (response.statusCode == 200) {
      final List result = jsonDecode(response.body)['data'];
      userList.value = result.map((e) => UserModel.fromJson(e)).toList();
      isLoading.value = false;
      update();
    } else {
      Get.snackbar('Error Loading data!',
          'Sever responded: ${response.statusCode}:${response.reasonPhrase.toString()}');
    }
  }

So what actually is happening in the method above.

• First, we have our endpoint of the Api.
• Second we are calling the http.get method to get the data from the api.
• And then we are checking if the repsonse is success or not i.e the status code is 200 or not.
• If the response is OK we are decoding the response body and getting only data of data from the response body and assigning to it the list variable result.
• Then we map that result get the each element then convert each element to the object using UserModel.fromJson(e) and after the iteration gets completed we are returing it as list.
• After getting the data, we then change the state of isLoading to false.
• After all these, we notify the UI about the state or the change in data using update()method provided by Getx.
• And when we have error or we get other error response we are display the snackbar provided by Getx with the error message.

And then we need to call this method getUsers() inside the onInit() method provied by getx.

@override
  void onInit() {
    super.onInit();
    getUsers();
  }

Step 4: Displaying the data

After all the configurations and methods to manage state using Getx now it is time to display the data. For that create the new folder named screens inside the lib folder, and then create the new filed named home_screen.dart. And then create the stateless widget.

After creating the stateless class, you need to initialize your controller. To initialize the controller go down to the build method and you can initalize controller as follows:

@override
  Widget build(BuildContext context) {

     final controller =  Get.put<UserController>(UserController());
     List<UserModel> userList = controller.userList;
return ...
}

Now after initalizing the controller, you need to wrap your body widget with Obx. Wrapping the widget with Obx will only rebuild that particular widget and not the whole class when the state changes.

When the data is being fetched we are going to show the CircularProgressIndicator and when the data fetch is successfull we are going to dispaly the list of users.

This how our body is going to look like:

body: Obx(
        () => controller.isLoading.value
            ? const Center(child:  CircularProgressIndicator())
            : ListView.builder(
                itemCount: userList.length,
                itemBuilder: (_, index) {
                  return Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                    child: Card(
                      color: Theme.of(context).primaryColor,
                      child: ListTile(
                        title: Text(
                          '${userList[index].firstName}  ${userList[index].lastName}',
                          style: const TextStyle(color: Colors.white),
                        ),
                        subtitle: Text(
                          '${userList[index].email}',
                          style: const TextStyle(color: Colors.white),
                        ),
                        leading: CircleAvatar(
                          backgroundImage: NetworkImage(
                             userList[index].avatar.toString()),
                        ),
                      ),
                    ),
                  );
                },
              ),
      ),
  

After all, lastly you need to call the home propery to HomePage inside the MaterialApp.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      home:const HomePage(),
    );
  }

Other methods to initialize the Getx Controller

As above in home_screen.dart file. You have initalized the controller as follows:

@override
  Widget build(BuildContext context) {

     final controller =  Get.put<UserController>(UserController());
     
return ...
}

1. You can extend the whole view class with the GetView and then injecting our UserController with it.

       class HomePage extends GetView<UserController>{}

2. For the other option, you need to create a new file name controller_bindings.dart. Inside it, you need to create a new ControllerBindings class implementing the Bindings. Inside its default dependencies, you need to put the UserController buy using Get.put().

class ControllerBindings extends Bindings {
  @override
  void dependencies() {
    Get.put<UserController>(UserController());
  }
}

And then on HomePage.

@override
  Widget build(BuildContext context) {
     final controller = Get.find<UserController>();
     return ...
}

And lastly you need to add this binding class inside the initialBinding property of GetMaterialWidget.

@override
Widget build(BuildContext context) {
 return GetMaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'GetX Demo',
   initialBinding: ControllerBindings(),
}

Conclusion

In this article, I have explained the Getx and the Getx working mechansim. You can play around with code as per your need and choice. Try creating the new page. The Getx can be very useful for large projects.

I hope this blog post provides you with enough important information on Flutter Getx to use the get library and architecture in your upcoming project.

❤ ❤ Thanks for reading this article ❤❤

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us

Subscribe: Youtube

Full code: GitHub

Send us a query: Contact