9

I am using getx as my statemanagment for my flutter app. But I am having difficulties by updating the values in a list. So I have a usermodel with a parameter of isFollowing. When I click on a button the isFollowing variable shall change and the color should be updated. But it is not happening. I am using Obx as my widget, as I already injected the state at the beginning. It is all working fine with fetching the data and displaying it on the frontend. But when I wanna change the values in my list, it is not updating. My minimal reproducible example

HomeController

class HomeController extends GetxController {
  var userslist = List<User>().obs;

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

  void fetchUsers() async {
    var users= await ApiService().getapidata('${usersurl}feed');
    if (users!= null) {
      userslist.value= users;
    }
  }
}

Model

class User {
  User({
    this.id,
    this.user_name,
    this.profile_picture,
    this.isFollowing,
  });

  int id;
  String user_name;
  String profile_picture;
  bool isFollowing;


  factory User.fromJson(Map<String, dynamic> json) => User(
        id: json["id"],
        user_name: json["user_name"],
        profile_picture: json["profile_picture"],
        isFollowing: json["is_following"],
      );

View

class HomeScreen extends StatelessWidget {
  final HomeController homeController = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Obx(
          () => ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: homeController.usersList.length,
            itemBuilder: (context, index) {
              return UserWidget(homeController.usersList[index], index);
            },
          ),
        ),
      ),
    );
  }
}

UserWidget

class UserWidget extends StatelessWidget {
  final User user;
  final int index;
  UserWidget (this.user, this.index);
  @override
  Widget build(BuildContext context) {
    return InkWell(
        onTap : ()=> user.isFollowing = true // When I click on this the container it  shall be updated to yellow
        child: Obx( () => Container(
        decoration: const BoxDecoration(color: user.isFollowing ? Colors.yellow : Colors.black ), // Here is the update I wanna make
      ))
    );
  }
}

Coding Hotel
  • 127
  • 1
  • 1
  • 7

7 Answers7

12

it worked for me. After making changes to your reactive list, add Example:

if (users!= null) {
      userslist.value= users;

      userlist.refresh();
    } 
ömer bulut
  • 151
  • 1
  • 5
6

In your fetchUsers method instead of using

userslist.value= users;

use

userslist.assignAll(users);
S. M. JAHANGIR
  • 4,324
  • 1
  • 10
  • 30
  • thanks.. I was using something like userslist.value.addAll(users) which wasn't working. after changing it to assignAll, the widget re-rendered – JiN Jul 07 '21 at 06:13
4

Please use the GetBuilder for this.

onTap : (){ 
    user.isFollowing = true // When I click on this the container it  shall be updated to yellow
    controller.update()
}
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Alpit Panchal
  • 709
  • 1
  • 7
  • 25
3

after you assign a new value to the array list. just use the refresh function that is provided by getX then the UI will reload with new data

 yourlist.refresh();
2

instead of trying to update an element in the list, create a temporary element update it as you want and swap the list element with it. List elements are the observables not the attributes of these elements.

Ali Hajeh
  • 43
  • 1
  • 5
0

If you are changing a property of an item in a list give all items in the list a unique Id. The visual won't update unless you provide it with a unique id. https://pub.dev/packages/uuid

  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 22 '23 at 18:12
0

convert your list to a RxList, use the command below to add an element,

yourList.insert(elementYouWantToInsertAtTheEnd);

use the command below to update the list with a new list,

yourList.assignAll(newListYouWantToAssign);

This will automatically update the list in GetxController.