Need help with structuring ProviderScope for a production package.

[thisisamank]

We have a package which uses riverpod internally. This package exposes Widgets which uses riverpod to manage state. The problem we are facing is how to share ProviderScope for all the exported widgets of the package.

Example:

class Widget1 { ... }

class Widget2 { ... }

class MyProvider {
  final Widget child;
  MyProvider({this.child});
// this provider is a wrapper over provider scope
}


class Example extends StatefulWidget {
  const Example({super.key});
  @override
  State<Example> createState() => ExampleState();
}

class ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyProvider(
        child: Widget1(),
      ),
      // Now when a new widget is pushed in the stack it is not able to find `ProviderScope`
    );
  }
}

We can ask the users of this package to use MaterialApp inside MyProvider to solve this but then it would create issues with theming as the components will start using MaterialTheme instead of the theme we have made for it.
What should be a better way to handle it?

[rrousselGit]

Your MyProvider should be above MaterialApp.
You probably shouldn't be overriding MaterialTheme in MyProvider either. But rather expose a custom Theme object that your widgets will use.

[thisisamank]

Thanks @rrousselGit 🙇🏼