Getx State Management (Show Dynamic List) in Flutter

Today I will demonstrate the getx state management in this tutorial we will send and HTTP request and fetch post list through online Api by jsonplaceholder.typicode.com in to our flutter app, this article will be very exciting, so let’s get started.

What is Getx?

GetX comes as a powerful flutter package that offers us to handle complex state management solution, route management, and dependency injection. It focuses on three basic principles performance, productivity and organization. It solves the problem of code readability, complex app changes management and updates, code reduction with few lines to use and execute complex functionality. If we compare it with other state management solution like Block or Provider package, it stands out and gives us more robust and easy way to implement complex functionality.

Start with adding dependencies

dependencies:
  get: ^4.6.5
  http: ^0.13.5

Hit on pub get and we successfully install above dependencies. Inside main.dart do below changes. Wrap material app with GetMaterialApp to use the GetX route management inside the app.

Create myhomepage file and define MyhomePage class inside it.

Our post structure is this

{
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },

So let’s create model class for this data name it as “PostModel”

Now Create an app controller and extend with GetxController to manage the app data.

Create a service file to retrieve the postdata in json format and convert it into PostModel class inside Service class.

Now we are getting data inside our Services class file, getAllPosts return future list of PostModel. Next we call Services’s getAllPosts() method from AppController class, from init function we call callPostData which again call getAllPosts and return list of all Post.

Now we are ready to go, we can get all this data with the help of appcontroller object inside our MyhomePage class.

Create a Listview.builder and pass the postdata to its item like :

Let’s run the code and you will see your result.

thank you for reading and happy coding :)