Home > database >  How to change the textTheme of flutter app outside MateriapApp Buildcontext
How to change the textTheme of flutter app outside MateriapApp Buildcontext

Time:08-17

I created a class to make light and dark theme for my flutter app and for that I removed my previous theme and replaced it with the new class

Previous MaterialApp

 Widget build(BuildContext context) => MaterialApp(
    scaffoldMessengerKey: Utils.messengerKey,
    navigatorKey: navigatorKey,
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      dividerColor: Colors.black,
      textTheme: GoogleFonts.openSansTextTheme(
        Theme.of(context).textTheme,
      ),
    ),
    home: MainPage(),
  );
}

New MaterialApp

@override
  Widget build(BuildContext context) => ChangeNotifierProvider(
    create: (context)=> ThemeProvider(),
    builder: (context, _){
      final themeProvider = Provider.of<ThemeProvider>(context);
      return MaterialApp(
        scaffoldMessengerKey: Utils.messengerKey,
        navigatorKey: navigatorKey,
        debugShowCheckedModeBanner: false,
        themeMode: themeProvider.themeMode,
        darkTheme: MyThemes.darkTheme,
        theme: MyThemes.lightTheme,
        home: MainPage(),
      );
    },
  );
}

and finally this is MyThemes class and ThemeProvider

class ThemeProvider extends ChangeNotifier{
 ThemeMode themeMode = ThemeMode.dark;

 bool get isDarkMode => themeMode == ThemeMode.dark;

 void toggleTheme(bool isOn){
   themeMode = isOn? ThemeMode.dark: ThemeMode.light;
   notifyListeners();
 }
}

class MyThemes{
 static final darkTheme = ThemeData(
   scaffoldBackgroundColor: Colors.grey.shade900,
   colorScheme:const ColorScheme.dark(),
 );

 static final lightTheme = ThemeData(
 scaffoldBackgroundColor: Colors.white,
   colorScheme: const ColorScheme.light(),
     dividerColor: Colors.black,
     textTheme: GoogleFonts.aguafinaScriptTextTheme(
       Theme.of(context).textTheme,
     ),

 );
}

So my problem starts here. I am getting the error

Undefined name 'context'.

which make sense because I dont have a build context on this class and I cant figure out how to pass this text theme to the MaterialApp context

CodePudding user response:

you need a context to a static method, i think you must changed into static function :

static lightTheme (BuildContext context) 
    => ThemeData(
      scaffoldBackgroundColor: Colors.white,
      colorScheme: const ColorScheme.light(),
      dividerColor: Colors.black,
      textTheme: GoogleFonts.aguafinaScriptTextTheme(
        Theme.of(context).textTheme,
      ),
    );

it cannot be const right? because you need actual build context there;

CodePudding user response:

For those who had similar issue, this is how I solved it:

return MaterialApp(
    scaffoldMessengerKey: Utils.messengerKey,
    navigatorKey: navigatorKey,
    debugShowCheckedModeBanner: false,
    themeMode: themeProvider.themeMode,

    darkTheme: MyThemes.darkTheme.copyWith(
      scaffoldBackgroundColor: Colors.grey.shade900,
      colorScheme:const ColorScheme.dark(),
      textTheme: GoogleFonts.openSansTextTheme(
      ThemeData(brightness: Brightness.dark).textTheme,
      ),),

    theme: MyThemes.lightTheme.copyWith(
      textTheme: GoogleFonts.openSansTextTheme(
        ThemeData(brightness: Brightness.light).textTheme,

      ),),

I used Copywith method to add the font inside the MaterialApp and added the brightness theme inside google font to ensure the correct theme

  • Related