how do i use provider in this situation

Question

I want to create a change app theme mode and I saw a way of creating it with Provider but I'm new to Provider. For Example, I want to add some codes like this

(the highlighted code)

in my main which consists of many routes

Answer 1

You want to change the theme of the app, then you need to move provider up so it can cover the widget (App in this case) state, You could do something like this in your main method :

runApp(ChangeNotifierProvider(

    create: (context) => ThemeProvider(),
    child:MyApp()

);

now in the case of children you could simply call provider in the build method like this

Widget build(){
   var themeProvider = Provider.of<ThemeProvider>(context);
}

or you could use the consumer widget

Consumer<ThemeProvider>(
builder: (context, provider, child) {
//return something
}

)

Answer 2

I suggest you to move your ChangeNotifierProvider to your runApp() method

runApp(
        ChangeNotifierProvider<ThemeProvider>(
          create: (_) => ThemeProvider(),
          child: MyApp(),
        ),
      ),

Where your MyApp() is just all of your app extracted to its own widget.

Then you can actually easily access it as you wish with a Consumer widget on your build method.

return Consumer<ThemeProvider>(
    builder: (BuildContext context, ThemeProvider provider, _) {
    return MaterialApp(
     theme: provider.myTheme,
     ... 
   );
  }
)