如何使用存储在 sqflite FLUTTER 中的值在启动画面中设置 ThemeMode

Question

I have a Flutter Application where an sqflite database stored the user preference of ThemeMode (viz Dark, Light and System). I have created a splash screen using flutter_native_splash which supports dark mode too.
The Problem is this that I want the splash screen to follow the users stored value for theme mode. Currently, the code I am using is as follows:

class MyRoot extends StatefulWidget {
  // const MyRoot({Key? key}) : super(key: key);

  static ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.system);

  @override
  State<MyRoot> createState() => _MyRootState();
}


class _MyRootState extends State<MyRoot> {
  DatabaseHelper? databaseHelper = DatabaseHelper.dhInstance;
  ThemeMode? tmSaved;

  @override
  void initState() {
    Future.delayed(Duration.zero, () async => await loadData());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //to prevent auto rotation of the app
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: MyRoot.themeNotifier,
      builder: (_, ThemeMode currentMode, __) {
        return Sizer(
          builder: (context, orientation, deviceType) {
            return MaterialApp(
              title: 'My Application',
              theme: themeLight, //dart file for theme
              darkTheme: themeDark, //dart file for theme
              themeMode: tmSaved ?? currentMode,
              initialRoute: // my initial root
              routes: {
                // my routes
                .
                .
                .
                // my routes
              },
            );
          },
        );
      },
    );
  }

  Future<void> loadData() async {
    if (databaseHelper != null) {
      ThemeMode? themeMode= await databaseHelper?.selectStoredTheme(); // function retrieving sqflite stored value and returning ThemeMode value
      if (themeMode != null) {
         MyRoot.themeNotifier.value = themeMode;
         return;
      }
    }
    MyRoot.themeNotifier.value = ThemeMode.system;
  }
}

Currently, this shows a light theme splash screen loading, then converts it into dark with a visible flicker.
ValueListenableBuilder<ThemeMode>(... is to enable real time theme change from settings page in my app which working as intended (taken from A Goodman's article: "Flutter: 2 Ways to Make a Dark/Light Mode Toggle" .

main.dart has the below code:

void main() {
  runApp(MyRoot());
}

Answer 1

Have you tried loading the setting from sqflite in main() before runApp ? If you can manage to do so, you should be able to pass the setting as argument to MyRoot and then the widgets would be loaded from the start with the correct theme. I'm speaking in theory, I can't test what I'm suggesting right now.

Something like:

void main() async {
  ThemeMode? themeMode= await databaseHelper?.selectStoredTheme(); // function retrieving sqflite stored value and returning ThemeMode value
  runApp(MyRoot(themeMode));
}

[...]

class MyRoot extends StatefulWidget {
  ThemeMode? themeMode;

  const MyRoot(this.themeMode, {Key? key}) : super(key: key);

  static ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.system);

  @override
  State<MyRoot> createState() => _MyRootState();
}

Answer 2

Make your splashscreen. A main widget which get data from sqlflite And make splashscreen widget go to the your home widget with remove it using navigation pop-up