Flutter: change app-brightness according to device ligth/dark mode

user_11210371 0
Viewed 4449

Setup

In the main-class of a flutter app:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        body: Example(),
      ),
    );
  }
}

You can set ThemeData brightness to dark or light. (I think only from Android OS 10.0, API 29 onward) you can choose in your device settings the screen-tone (light | dark).

Example (OP7 pro)

Settings > Customisation > Tone > Colourful | Light |Dark

When in dark-mode and opening some apps (chrome for example), the app is set to dark. Opening other apps this doesn't happen.

Question:

1) Does your app brightness dynamically update based on device tone-settings if you don't set any ThemeData brightness? (Can't test this myself atm)

2) If not, how could you dynamically change ThemeData brightness based on the device screen tone-setting?

android-dark-theme flutter android
1 Answers

Though only suported on IOS 13 and Android 10 (api level 29), and for some browsers (Chrome, firefox, safari, edge).

More info: https://www.howtogeek.com/440920/browsers-are-bringing-automatic-dark-mode-to-websites/

For those wanting to implement this, Mr. Matt Carroll has made a blogpost about this: https://medium.com/flutter/android-dark-theme-in-flutter-9c8070b8b127

The Flutter (Dart) - code:

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.red,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),
);
user_112103710
Related