Getx Flutter - Updating item in list is not reactive

Question

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
      ))
    );
  }
}

change following statement only `userslist.value= users;` to `userlist.addAll(users)` — Abdul Qadir, Apr 06 '21 at 05:15
or else try replacing `userlist.value = users` to `userlist(users)` and pass `ListView.builder` a unique key it worked for me — Abdul Qadir, May 23 '23 at 14:14

score 12 · Answer 1 · answered Nov 22 '21 at 21:34

12

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

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

      userlist.refresh();
    }

answered Nov 22 '21 at 21:34

ömer bulut

151
1
5

if update any one value of one Item how to update Obx? – Abhi S Nov 11 '22 at 05:53
1

here we update the entire list after updating the item. It will be updated with Obx since the list is already RxList. – ömer bulut Nov 11 '22 at 08:09

score 6 · Answer 2 · answered Mar 27 '21 at 15:33

6

In your fetchUsers method instead of using

userslist.value= users;

use

userslist.assignAll(users);

answered Mar 27 '21 at 15:33

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

score 4 · Answer 3 · edited Apr 05 '21 at 13:25

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()
}

edited Apr 05 '21 at 13:25

Suraj Rao

29,388
11
94
103

answered Apr 05 '21 at 13:24

Alpit Panchal

709
1
7
25

Thanks!. I have a List to load a list of checkbox and this wok perfectly. – Br0wn Aug 30 '21 at 14:44
or you can use user.refresh(). when model class changed then it need to call refresh for refreshing data – Alwayss Bijoy Oct 23 '21 at 18:38

score 3 · Answer 4 · answered Oct 05 '22 at 02:42

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();

answered Oct 05 '22 at 02:42

Kavindu Dissanayake

643
7
7

score 2 · Answer 5 · answered Jun 16 '22 at 21:56

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.

answered Jun 16 '22 at 21:56

Ali Hajeh

43
1
5

You are right, that is what i did for a user map containing friend and friend requests list – prince david Feb 10 '23 at 14:39

score 0 · Answer 6 · answered Apr 19 '23 at 13:15

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

answered Apr 19 '23 at 13:15

Jaap van Dalen

1
1

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

score 0 · Answer 7 · answered Jun 02 '23 at 04:36

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.

Getx Flutter - Updating item in list is not reactive

7 Answers7

Linked