Flutter: turn off dark mode theme

Question

When I test my app out with dark mode activated on my phone the cupertinoTabBar changes do a dark theme. How can I prevent this? I only want my app to be themed in light mode.

Answer 1

Set ThemeMode.light to themeMode field on your Top App Component Such as MaterialApp.

For Example.

MaterialApp(
   themeMode: ThemeMode.light,
)

In addition, there are 3 modes in the Flutter.

//Use either the light or dark theme based on what
//the user has selected in the system settings.
ThemeMode.system

// Always use the light mode regardless of system preference.
ThemeMode.light

//Always use the dark mode (if available) regardless of system preference.
ThemeMode.dark

Answer 2

There's also a great thread on this here: https://github.com/flutter/flutter/issues/41067#issuecomment-571689955

I had trouble changing the color of the top bar. The solution is to add

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

And add this to your dart code:

import 'package:flutter/services.dart';
/// ...
SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarBrightness: Brightness.light) // Or Brightness.dark
);

This will force your status bar to black instead of white.