Version: 7.2.0

Working with tags

If you need to have multiples providers using the same SimpleNotifier or StateNotifier class but you don't want create a provider for each notifier you could use the withTag method to create multiples providers for a single Notifier class with its own state.

class CounterController extends SimpleNotifier {
  int counter = 0;
  void increment() {
    counter++;
    notify();
  }
}

Now you can create yours provider using SimpleProvider.withTag or StateProvider.withTag

final counterProviderWithTag = SimpleProvider.withTag(
  (_) => CounterController(),
);


class SimpleTagPage extends StatelessWidget {
  const SimpleTagPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Container(
          width: double.infinity,
          height: double.infinity,
          child: Column(
            children: [
              // each SimpleConsumerWithTag has their own state
              Expanded(
                child: SimpleConsumerWithTag(
                  tagName: 'counter1',
                  color: Colors.black26,
                ),
              ),
              Expanded(
                child: SimpleConsumerWithTag(
                  tagName: 'counter2',
                  color: Colors.redAccent.withOpacity(0.3),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SimpleConsumerWithTag extends StatelessWidget {
  final String tagName;
  final Color color;
  const SimpleConsumerWithTag({
    Key? key,
    required this.tagName,
    required this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (_, ref, __) {
        // the find method creates a new unique provider using a string as key
        final controller = ref.watch(
          counterProviderWithTag.find(tagName),
        );
        final counter = controller.counter;
        return Container(
          color: this.color,
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("$counter"),
              SizedBox(height: 10),
              CupertinoButton(
                color: Colors.blue,
                onPressed: () {
                  controller.increment();
                },
                child: Text("increment"),
              ),
            ],
          ),
        );
      },
    );
  }
}

Also you can use counterProviderWithTag.find('tagName') to pass an initial argument to your notifier

counterProviderWithTag.find(tagName).setArguments('initial argument');

Also for StateNotifier you can use the withTag method but you need to define the generic types

final loginProviderWithTag = StateProvider.withTag<LoginController, LoginState>(
  (_) => LoginController(),
);