如何将 Provider 用于 Switch 小部件

Question

From the examples and those am seeing online, it looks like by by using Provider, we can avoid using Stateful Widgets for Switch() toggling. I could achieve this by using a Stateful widget by having a global variable which I could set via setState().

An example: https://www.tutorialkart.com/flutter/flutter-switch/

But can I achieve this as a stateless widget using Provider for a Switch Widget?

This is my Switch widget:

Switch(
  inactiveTrackColor: Colors.greenAccent,
  onChanged: (bool isNoti) {
    Provider.of<Data>(context, listen: false).toggleNotification(isNotifiable: !isNoti);
    print('Noti: $isNoti'); // always prints false
    print('Noti: ${Provider.of<Data>(context, listen: false).isNotifiable}'); // always prints true
  },
  value: Provider.of<Data>(context, listen: false).isNotifiable, // value doesn't change thus no toggle
),

Data class used by Provider.

class Data extends ChangeNotifier {

  bool isNotifiable = false;

  void toggleNotification({bool isNotifiable = true}) {
    this.isNotifiable = isNotifiable;
    notifyListeners();
  }
}

Just to show it in completion, I do wrap it in ChangeNotifierProvider.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Data>(
      create: (context) => Data(),
      child: ListTile(
        leading: Icon(Icons.notifications),
        title:  Text('Notifications'),
        trailing: Switch(
          inactiveTrackColor: Colors.greenAccent,
          onChanged: (bool isNoti) {
            Provider.of<Data>(context, listen: false).toggleNotification(isNotifiable: !isNoti);
            print('Noti: $isNoti');
            print('Noti Provider: ${Provider.of<Data>(context, listen: false).isNotifiable}');
          },
          value: Provider.of<Data>(context, listen: false).isNotifiable,
        ),
      ),
    );
  }
}

Always get following output when I click the toggle.

Noti: false
Noti Provider: true

Please advice. Thank you.

Answer 1

I think I found your mistake, You've done everything right expect your switch is not rebuilding and the mistake here is that you've mentioned so that it should not rebuild.

trailing: Switch(
          inactiveTrackColor: Colors.greenAccent,
          onChanged: (bool isNoti) {
            Provider.of<Data>(context, listen: false).toggleNotification(isNotifiable: !isNoti);
            print('Noti: $isNoti');
            print('Noti Provider: ${Provider.of<Data>(context, listen: false).isNotifiable}');
          },
          value: Provider.of<Data>(context).isNotifiable,  // remove `listen: false` 
        ),

As value is what your switch depends on to rebuild. But the provider is not listening to changed because you've mentioned listen: false .

Use

• Provider.of<Data>(context, listen: false) when you are reading data such as in callbacks.
• Provider.of<Data>(context) use this when your widget needs to rebuild by listening to the changes