Flutter: Elements is not adding in the list

Question

Hi I am learning the state management in the flutter and using the GetX package. When the app loads i am adding the users in the list but the issue is ther is one get more button when the button click i am calling the same function but the elements are not getting added to the list. Can anybody look and told what i am doing wrong.

import 'package:get/state_manager.dart';
import 'package:randomuser_with_getx/models/users.dart';
import 'package:randomuser_with_getx/services/random_user_service.dart';

class RandomUserController extends GetxController {
  // ignore: deprecated_member_use
  var users =List<UserResults?>.empty(growable: true).obs;
  @override
  void onInit() {
    super.onInit();
    fetchUsers();
  }

  void fetchUsers() async {
    var result =  await RandomUserService().getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }

    void fetchMoreUsers() async {
    var result =  await RandomUserService().getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }
}

I Have also tried by making the separate function but that also doesn't works

Controller code:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:randomuser_with_getx/constants/string.dart';
import 'package:randomuser_with_getx/models/users.dart';

class RandomUserService {
   Future<User> getRandomusers() async {
    var client = http.Client();
    var userModel = null;
    try {
      var response = await client.get(Uri.parse(Strings.random_user_url));
      if (response.statusCode == 200) {
        var jsonString = response.body;
        var jsonMap = jsonDecode(jsonString);
        print(jsonMap);
        userModel = User.fromJson(jsonMap);
        print(userModel);
        return userModel;
      }
    } catch (Exception) {
      return userModel;
    }
    return userModel;
  }
}

UI page

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:randomuser_with_getx/controllers/counterController.dart';
import 'package:randomuser_with_getx/controllers/randomUserController.dart';

class randomUserPage extends StatelessWidget {
  final randomUserController = Get.put(RandomUserController());
  final countercontoller = Get.put(CounterController);
  randomUserPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Random User"),
      ),
      body: Column(
        children: [
          Expanded(
            child: GetX<RandomUserController>(builder: (controller) {
              print(controller.users.length);
              return ListView.builder(
                  itemCount: controller.users.length,
                  itemBuilder: (context, index) {
                    var user = controller.users[index];
                    return Card(
                      shadowColor: Colors.red,
                      clipBehavior: Clip.hardEdge,
                      shape:StadiumBorder(
                        side: BorderSide(
                          width: 4
                        ) 
                      ) ,
                      child: ListTile(
                        leading: CircleAvatar(
                          child: ClipOval(
                              child: Image.network(
                                  user!.picture!.thumbnail.toString())),
                        ),
                        title: Text(user.name!.first.toString()),
                      ),
                    );
                    // return Card(
                    //   child:
                    //       Text(controller.users[index]!.name!.first.toString()),
                    // );
                  });
            }),
          ),
          TextButton(onPressed: ()=>{
              RandomUserController().fetchMoreUsers()
          }, child: Text("get more")),
          Text("TOtal amount"),
          SizedBox(
            height: 100,
          )
        ],
      ),
    );
  }
}

Answer 1

There are multiple places where your code has problems. You can try my code and see if the problem still presisst.

import 'package:get/state_manager.dart';
import 'package:randomuser_with_getx/models/users.dart';
import 'package:randomuser_with_getx/services/random_user_service.dart';

class RandomUserController extends GetxController {
  // ignore: deprecated_member_use
  final user =<UserResults?>[].obs;
  final service = RandomUserService();
  @override
  void onInit() {
    fetchUsers();
    super.onInit();
  }

  void fetchUsers() async {
    var result =  await service .getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }

    void fetchMoreUsers() async {
    var result =  await service .getRandomusers();
    print(result);
    users.add(result.results![0]);
    print("users length is ${users.length}");
  }
}

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:randomuser_with_getx/controllers/counterController.dart';
import 'package:randomuser_with_getx/controllers/randomUserController.dart';

class RandomUserPage extends StatelessWidget {
  final controller = Get.put(RandomUserController());
  final countercontoller = Get.put(CounterController());
  RandomUserPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Random User"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Obx(() {
              print(controller.users.length);
              return ListView.builder(
                  itemCount: controller.users.length,
                  itemBuilder: (context, index) {
                    var user = controller.users[index];
                    return Card(
                      shadowColor: Colors.red,
                      clipBehavior: Clip.hardEdge,
                      shape:StadiumBorder(
                        side: BorderSide(
                          width: 4
                        ) 
                      ),
                      child: ListTile(
                        leading: CircleAvatar(
                          child: ClipOval(
                              child: Image.network(
                                  user!.picture!.thumbnail.toString())),
                        ),
                        title: Text(user.name!.first.toString()),
                      ),
                    );
                    // return Card(
                    //   child:
                    //       Text(controller.users[index]!.name!.first.toString()),
                    // );
                  });
            }),
          ),
          TextButton(onPressed: ()=>{
             controller.fetchMoreUsers() // HERE SHOULD NOT BE ANOTHER CLASS INSTANCE USE BACK THE CONTROLLER
          }, child: Text("get more")),
          Text("TOtal amount"),
          SizedBox(
            height: 100,
          )
        ],
      ),
    );
  }
}