Search code examples
flutterdartflutter-dependenciesriverpodflutter-listview

ListView.Builder in Riverpod not updating properly


I'am developing an app with flutter and flutter_riverpod. I want to use listview.Builder with riverpod. But I got some problems it just doesn't update the list when i add a nother user to the liste. I am pretty new so any tips would help a lot Providers Page:


final users_liste_pro = StateProvider((ref) {
  return liste;
});
final events_liste_pro = StateProvider((ref) {
  return events_liste;
});
final txt = StateProvider((ref) {
  return 0;
});

liste:

var liste=[
  User(0,"adam","0000000","zone2","0000000","0000000000",null,false),
User(1,"adam","0000000000","zone4","0000000","0000000000",null,false),

];

ConsumerWidget:


class event_page extends ConsumerWidget {
  Event event ;
  event_page(this.event);
  @override
  Widget build(BuildContext context,WidgetRef ref) {

    final users = ref.watch(users_liste_pro);

    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text("Event"),
      ),
      body: Container(
        width: size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 5,),
            Center(child: Text(event.name,style: TextStyle(fontSize: 30),)),
            Text("  Payed List :"),
            **//only way i could solve it is by addig this variable DOWN BELOW IS FULL COMMENT**
            *Text(ref.watch(txt).toString()),*
            Expanded(
              child: ListView.builder(
                  itemCount: users.length,
                  itemBuilder: (context, index) {
                    return eventpage_card(users[index],index);
                  }
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: (){
        ref.read(users_liste_pro.notifier).state.add(User(400, "name", 'tele', "zone", "ville",           "quartier",null, true));
        **//only way I could solve it is by adding this variable that i shown in a simple text in    the page if i dont add it the other ref.watch for the list doesnt work**
        *ref.read(txt.notifier).state++;*
      },),
    );
  }
}


weird but working solution is I added another StateProvider that only returns an int and each time I want to add a user I increment the number but I know that I must be doing something wrong


ref.read(users_liste_pro.notifier).state.add(User(400, "name", 'tele', "zone", "ville",
"quartier",null, true));
//only way i could solve it is by adding this variable that i shown in a simple text in the page if i dont add it the other ref.watch for the list doesnt work
ref.read(txt.notifier).state++;


after i added StateNotifierProvider the first error was fixed but now the lists index doesnt update for some reason:

class Userlistnotifier extends StateNotifier<List<User>>{   Userlistnotifier(): super([...liste]);

  void add(){
    state=[...state,User(400, "name", 'tele', "zone", "ville", "quartier",null, true)];
  }
}
final Userlist_provider=StateNotifierProvider<Userlistnotifier,List<User> >((ref) => Userlistnotifier());

final users2 = ref.watch(Userlist_provider);

ListView.builder(
                  itemCount: users2.length,//this lenght does not update
                  itemBuilder: (context, index) {
                    return eventpage_card(users2[index],index);
                  }
              ),

Solution

  • The state updates only when new values is assigned to the state. So use the following code:

    final newUser = User(400, "name", 'tele', "zone", "ville", "quartier", null, true);
    ref.read(users_liste_pro.notifier).update((value) => [...value, newUser]);
    

    Also, it is not recommended to use StateProvider for compex objects.

    For more advanced cases, consider using StateNotifierProvider instead and create a StateNotifier class. While the initial boilerplate will be a bit larger, having a custom StateNotifier class is critical for the long-term maintainability of your project – as it centralizes the business logic of your state in a single place.