Flutter App中的状态恢复闪烁/闪烁屏幕

Question

I have implemented the dark & light theme in my app according the device settings mode.

I put the app in background and when I come back I'm seeing some flashes/flickering on Resume.

Here is a random page in my app to observe the behavior :

The behavior is like the Light theme was reset first on Resume, and then remember that this is actually the Dark theme set. Then I supposed the main App Theme could be reloaded on state Resume but I'm not very sure.

Is the material app reloaded on Resume ?

Here is my MaterialApp :

MaterialApp(
              navigatorKey: NavigationService.navigatorKey,
              theme: ThemeProvider.instance.getLightTheme(),
              darkTheme: ThemeProvider.instance.getDarkTheme(),
              themeMode: ThemeProvider.instance.getThemeMode(),
              locale: Locale(SharedPreferencesManager.instance.getLocale()),
              debugShowCheckedModeBanner: false,
              localizationsDelegates: const [
                LocalizationDelegate(),
                CountryLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
              ],
              supportedLocales: LocaleManager().getSupportedLocale(),
              home: WillPopScope(
                onWillPop: () async => false,
                child: const HomePage(),
              ));

The theme provider manager methods for theme :

ThemeMode getThemeMode() {
    if (SharedPreferencesManager.instance.getTheme() == "dark") {
      onDarkMode = true;
      return ThemeMode.dark;
    } else if (SharedPreferencesManager.instance.getTheme() == "light") {
      onDarkMode = false;
      return ThemeMode.light;
    } else {
      return ThemeMode.system;
    }
  }

  ThemeData getDarkTheme() {
    return ThemeData.dark().copyWith(
      scaffoldBackgroundColor: Colors.black,
      primaryColor: shadow,
      primaryColorLight: shadow2,
      shadowColor: Colors.transparent,
      splashColor: Colors.transparent,
      highlightColor: shadow,
      dialogBackgroundColor: shadow,
      brightness: Brightness.dark,
      dividerTheme: DividerThemeData(
        color: Colors.white.withOpacity(0.1),
        thickness: 0.5,
        space: 0,
      ),
      textTheme: const TextTheme(
          headline1: TextStyle(
              fontSize: 16, fontWeight: FontWeight.bold, color: highlight),
          headline2: TextStyle(
              fontSize: 14, fontWeight: FontWeight.bold, color: highlight),
          bodyText1: TextStyle(
            fontSize: 16,
            color: highlight,
          ),
          bodyText2: TextStyle(
            fontSize: 14,
            color: highlight,
          ),
          subtitle1: TextStyle(
              fontSize: 22, fontWeight: FontWeight.bold, color: highlight),
          subtitle2: TextStyle(
              fontSize: 18, fontWeight: FontWeight.bold, color: highlight)),
      // Android over scroll
      colorScheme:
          ColorScheme.fromSwatch().copyWith(secondary: Colors.transparent),
    );
  }

  ThemeData getLightTheme() {
    return ThemeData.light().copyWith(
        //scaffoldBackgroundColor: Colors.white,
        splashColor: Colors.transparent,
        primaryColor: Colors.white,
        primaryColorLight: light,
        shadowColor: elevationColor,
        brightness: Brightness.light,
        highlightColor: light,
        dialogBackgroundColor: Colors.white,
        dividerColor: light.withOpacity(0.5),
        dividerTheme: DividerThemeData(
            color: light.withOpacity(0.5), thickness: 0.5, space: 0),
        textTheme: const TextTheme(
            headline1: TextStyle(
                fontSize: 16, fontWeight: FontWeight.bold, color: shadow),
            headline2: TextStyle(
                fontSize: 14, fontWeight: FontWeight.bold, color: shadow),
            bodyText1: TextStyle(fontSize: 16, color: shadow),
            bodyText2: TextStyle(fontSize: 14, color: shadow),
            subtitle1: TextStyle(
                fontSize: 22, color: shadow, fontWeight: FontWeight.bold),
            subtitle2: TextStyle(
                fontSize: 18, color: shadow, fontWeight: FontWeight.bold)),
        colorScheme:
            ColorScheme.fromSwatch().copyWith(secondary: Colors.transparent));
  }

This behavior is not happening for 100% but let say 1 time on 5 while resuming and never on start state (first time launch).

Can someone tell me if I made a mistake to get this result on some config ?

Is this related to the theme ? Or maybe nothing at all

Answer 1

这个问题似乎在 Flutter 3 版本中得到修复