how could I change the modes of flutter app with the mode of the mobile itself?

Question

how could I change the modes of flutter app with the mode of the mobile itself? is there any available way to make this ?

Answer 1

Okay since you want to change your apps theme according to the user's current theme you have to:

1. Create a class that defines both the themes: Here is a link of one of my recent projects where I am using both dark and light themes :

class CustomTheme {

  static final lightTheme = ThemeData(

      appBarTheme: AppBarTheme(
          backgroundColor: CustomColors.coral,
          foregroundColor: Colors.grey.shade700),
      colorScheme: ColorScheme(
          brightness: Brightness.light,
          primary: CustomColors.coral,
          onPrimary: CustomColors.coral,
          secondary: CustomColors.babyPink,
          ),
      )),


static final darkTheme = ThemeData(
      colorScheme: ColorScheme(
          brightness: Brightness.dark,
          primary: CustomColors.onBackground,
          onPrimary: CustomColors.onBackground,
          secondary: CustomColors.background,
          onSecondary: CustomColors.background,
          error: CustomColors.errorColor,
          onError: CustomColors.onErrorColor,
          background: CustomColors.background,
          onBackground: CustomColors.onBackground,
          surface: CustomColors.coral,
          onSurface: CustomColors.onBackground)),

2. Then specify your theme in the main.dart file

   MaterialApp(

      themeMode: ThemeMode.system,
      theme: CustomTheme.lightTheme,
      darkTheme: CustomTheme.darkTheme,
      home: const SplashScreen(),
      debugShowCheckedModeBanner: false,
    );
   

3. Then use these themes wherever you want, so if you have a container then you can say

   color: Theme.of(context).colorScheme.secondary,

Checkout one of my apps where I am using both themes

https://github.com/MayurSMahajan/FrontendSIH/tree/main/daemon/lib