flutterproviderstate-managementflutter-state

When to use Consumer & when to use context.watch to access the provider values?


Recently I discovered that we can access the provider value using either

Consumer<Model>(build: (context, value, child){
    return Widget(child: value.valueName),
  },
 ) 

Or using

context.watch<Model>().valueName

What is the best practice?


Solution

  • context.watch<T>() is used right after build() which cause the entire widget tree to rebuild which is not good for performance. Unless it's the desired behavior in case of a smaller component, this should never be encouraged. Instead use Consumer<T> for widget which requires to rebuild. Consumer<T> makes sure to rebuild the widget when any data is changed in respective Class which extends ChangeNotifier for that Consumer.

    I found it's better most of the time to use context.select<T>() & Selector<T> instead of context.watch<T>() & Consumer<T> as it only rebuild when only specific data is changed & not when any data is modified. Which reduce the number of rebuilds significantly.