flutter update value of variable inside ChangeNotifier - flutter

Question

I have a notifier.dart file where I have declared some ChangeNotifiers. One of which is OpacityChangeNotifier.
OpacityChangeNotifier Class:
class OpacityChangeNotifier extends ChangeNotifier {
double _opacity = 1.0;
double get opacity => _opacity;
void changeOpacity(double providedOpacity) {
_opacity = providedOpacity;
notifyListeners();
}
void printOpacity() {
print(_opacity);
}
}
This is for my coloring app where I want the user to start with an opacity of 1.0. Then he/she can change it.
Here's the opacity_picker widget
final _opacityProvider = ChangeNotifierProvider<OpacityChangeNotifier>((ref) {
return OpacityChangeNotifier();
});
class OpacityPicker extends ConsumerWidget {
const OpacityPicker({Key key}) : super(key: key);
#override
Widget build(BuildContext context, ScopedReader watch) {
final opacityPicker = watch(_opacityProvider);
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
onPressed: () {
opacityPicker.changeOpacity(0.1);
},
icon: Icon(Icons.opacity, size: 20),
),
IconButton(
onPressed: () {
opacityPicker.changeOpacity(0.5);
},
icon: Icon(Icons.opacity, size: 20),
),
IconButton(
onPressed: () {
opacityPicker.changeOpacity(1.0);
},
icon: Icon(Icons.opacity, size: 20),
),
],
),
);
}
}
Now I want to use this opacity_picker inside another widget called menu_items. I've added a simple Icon button to test if the values(0.1,0.5,1.0) for opacity were getting updated or not.
IconButton(
onPressed: () {
opacity.printOpacity();
},
icon: Icon(Icons.dock_rounded),
)
But it seems the value is remaining the same which I provided as default: 1.0. Any solution on how to update the value I provided or any other way how I can change the opacity?

Answer 1

I'm not familiar with how you're instantiating ChangeNotifierProvider just above your OpacityPicker class. So I'm not sure if that's correct or not.
As Provider is built with InheritedWidget, any part of your app you wish to be "reactive" to changes of Provider state, needs to be a child underneath your ChangeNotifierProvider.
One way to ensure this is to wrap MyApp with your ChangeNotifierProvider. Therefore, your entire app is within the Provider's InheritedWidget scope. Remi (author of Provider) shows this in his example code:
void main() {
runApp(
/// Providers are above [MyApp] instead of inside it, so that tests
/// can use [MyApp] while mocking the providers
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => Counter()),
],
child: const MyApp(),
),
);
}
He's using MultiProvider but you can see that MyApp() is the child of Provider.
Are you doing something similar in your app?