Flashing/Incorrect bevior on theme change in flutter web deployment on mobile devices

[alexw92]

Describe the bug As discussed in other issues we can prevent a flashing bevior on Theme changes and set initial values when passing it directly into the AdaptiveThemeWidget when passing an savedThemeMode before runApp. However, I am currently experiencing a flash in the browser status bar and browser bar when switchting from light to dark mode and vice versa. There is no flash when I build for Android There is no flash when I build for Web and access with DesktopBrowser (tested with Chrome and Firefox)

THERE IS A FLASH When building for web and accessing through a Browser on a mobile device! (Tested with three phones, two of them recent Android phones and one recent Iphone) It is very hard to reproduce and to demonstrate because of this but for demonstration purpose I post my sample site where it is deployed. You need to open this using your mobile phones browser Test Site. Just hit the theme change button and should see the incorrect bevior.

https://github.com/BirjuVachhani/adaptive_theme/assets/9419583/6133f083-e567-48c0-8999-1e203d706a85

To Reproduce Steps to reproduce the behavior:

1. Go to Test Site with your phones browser
2. Click on the theme change button 3 See the flash in the status bar and browser bar.

Expected behavior No flash and same expeierence as on a desktop browser

Smartphone (please complete the following information): 1 Recent Iphone using browser (no data because not my device) 1 Android Phone from 2021 using browser (no data because not my device) 1 Android Phone Huawei P30 Pro using browser (my phone)

Additional context I am using adaptive_theme: ^3.3.0

This is the code of used main.dart file

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedThemeMode = await AdaptiveTheme.getThemeMode();
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

class MyApp extends StatelessWidget {
  final AdaptiveThemeMode? savedThemeMode;
  const MyApp({super.key, this.savedThemeMode});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
        light: ThemeData(
          colorSchemeSeed: Colors.green,
          brightness: Brightness.light,
          appBarTheme: const AppBarTheme(
              systemOverlayStyle: SystemUiOverlayStyle(
                  systemNavigationBarColor: Colors.green,
                  systemNavigationBarIconBrightness: Brightness.dark)),
          useMaterial3: true,
        ),
        dark: ThemeData(
          colorSchemeSeed: Colors.green,
          brightness: Brightness.dark,
          appBarTheme: const AppBarTheme(
              systemOverlayStyle: SystemUiOverlayStyle(
                  systemNavigationBarColor: Colors.green,
                  systemNavigationBarIconBrightness: Brightness.light)),
          useMaterial3: true,
        ),
        debugShowFloatingThemeButton: true,
        initial: savedThemeMode ?? AdaptiveThemeMode.light,
        builder: (theme, darkTheme) => MaterialApp(
              title: 'FoodSnapAI',
              theme: theme,
              darkTheme: darkTheme,
              home:
                  const MyHomePage(title: 'FoodSnapAI page - work in progress'),
            ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
  }

  void _toggleDarkMode() {
    final manager = AdaptiveTheme.of(context);
    if (manager.mode.isLight) {
      manager.setDark();
    } else {
      manager.setLight();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        title: Text(
          widget.title,
        ),
        actions: [
          Container(
              margin: const EdgeInsets.only(right: 20.0),
              child: IconButton(
                  onPressed: _toggleDarkMode,
                  icon: Icon(AdaptiveTheme.of(context).mode.isDark
                      ? Icons.dark_mode
                      : Icons.dark_mode_outlined)))
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            BuildingCard(),
          ],
        ),
      ),
    );
  }
}

[BirjuVachhani]

@alexw92 Would you also mind providing a screen record of what you're seeing? Would be much more helpful for me trying to reproduce! Thanks!

[alexw92]

@BirjuVachhani Sure, I just recorded a short video with my phone which shows the issue. It is attached above

[giga10]

I am just passing by and giving feedback. 😀

On android 13 in Edge browser v116 it works fine. 👌

https://github.com/BirjuVachhani/adaptive_theme/assets/119455938/ec2e8107-4717-4d36-b5f8-fb70e499f20e

@alexw92 check latest release for cleaner theme switch 😀

[alexw92]

thanks @giga10 for your feedback. I updated the dependency.

So for me it looks like that the status bar is onTheme change quickly changed to green before that change is taken back immediately. Also shouldnt Chrome itself go dark in darkmode? When I open github on my phone the chrome bar is dark for instance. I have do clue what I am doing wrong here.

[BirjuVachhani]

I checked on chrome and safari on iOS 16 and it seems to be working just fine both in light mode and dark mode!

https://github.com/BirjuVachhani/adaptive_theme/assets/20423471/343f9521-824b-4062-ac5e-eea18ffb8562

https://github.com/BirjuVachhani/adaptive_theme/assets/20423471/c0c5ee01-8854-4c39-91cf-ae7941f72aee

[BirjuVachhani]

AFAIK..this is not something that can be controlled by Flutter. I'll try to test on an Android device!

[alexw92]

thanks @BirjuVachhani very interesting. It seems even in the second video the status bar gets colored too which I never got working on the devices I have at hand. On all 3 I tested it it on it was like i posted above unfortunately.

[BirjuVachhani]

@alexw92 Is this still an issue for you with latest Flutter verison?

[alexw92]

I couldnt reproduce it ever since :D It seems to work fine now. I am not completely sure what the reason was in the first place since this was some time ago :D But it works for me too now!