How to use multiple Consumers for a single widget in flutter Provider

Question

I can't wrap my head around using multiple consumers for a single widget with provider? Suppose my widget is CurvedNavigationBar and I have 4 items in that widget. I also have 4 different classes that extend ChangeNotifier and are responsible for each item in CurvedNavigationBar.

How can I listen to those 4 change notifiers in a single widget? I looked at the documentation and could not found such an example.. is this even possible? I found that Consumer has a builder method, so that means you can build a widget only once/and listen to it once.

Should I rather have a single class that extends ChangeNotifier and then update values in that widget and uses only a single Consumer to listen for updated values?

score 88 · Accepted Answer · answered Jan 24 '20 at 07:33

88

There are some other Consumer widgets. Consumer2, Consumer3, Consumer4 till Consumer6. If you want to listen 4 ChangeNotifier you can use Consumer4

Consumer4(
  builder: (context, changeNotifier1, changeNotifier2, changeNotifier3, changeNotifier4, child) {
    // your widget
  }
)

answered Jan 24 '20 at 07:33

Selim Kundakçıoğlu

1,986
10
20

7

Isn't this kind of a weird design? What if you need 7 or more pieces of state? – Cameron Sima Nov 25 '20 at 19:02
2

@CameronSima To be honest, I have no idea why it is implemented this way. You can see the implementation in https://github.com/rrousselGit/provider/blob/master/lib/src/consumer.dart – Selim Kundakçıoğlu Jan 26 '21 at 10:37
5

I've bursted into laugh at the `ConsumN` thing, not because they solved my problem. – John Wang Jun 15 '21 at 09:44
1

Excatly... @CameronSima what if i need more provider? – jksevend Aug 02 '22 at 08:09
1

I guess somebody was drunk while coding. Well, it works. Won't complain. – RumelDilDumpel Sep 02 '22 at 09:17
``` Consumer( builder: (context, modelData, child) { ``` how ???? – Yogi Arif Widodo Jan 30 '23 at 22:01
ah i got it ... i have clicked `Consumer` and scroll to find out of the core thats the different is `Consumer` and `Consumer2` , `Consumer4`. oke thankyou – Yogi Arif Widodo Jan 30 '23 at 22:03

score 45 · Answer 2 · answered Apr 06 '20 at 08:49

45

Yes you can add up to 6 consumers and will be as following

    Consumer2<AuthProvider, StorageProvider>(
    builder: (context, authProvider, storageProvider, child) {

    }
    )

answered Apr 06 '20 at 08:49

Islam Emam

678
5
11

score 3 · Answer 3 · answered Oct 04 '21 at 09:50

3

There is another way to get access to your providers: Provider.of<SomeProvider>(context):

Widget build(BuildContext context) {
  final authProvider = Provider.of<AuthProvider>(context);
  final apiProvider = Provider.of<ApiProvider>(context);
  final storageProvider = Provider.of<StorageProvider>(context);

  // Do your usual stuff without wrapping it into Consumer,
  // just pass providers directly to your targets.
  return MyAwesomeWidget(
    authProvider,
    apiProvider,
    storageProvider,
  );
}

answered Oct 04 '21 at 09:50

Aux

440
3
10

I had same mistake like you (include using Builder Widget), please test it, you'll see it work but it has performance issue, the app will slow down at least 33% for 3 providers. I have to vote it down. – SLyHuy Dec 25 '21 at 12:09
If you are passing objects fetched from provider into a widget, then you should just get rid of all the parameters and call Provider.of<...> within the widget where it's needed to minimize what is rebuilt. – Jeff Neet Feb 19 '23 at 01:52

How to use multiple Consumers for a single widget in flutter Provider

3 Answers3