Flutter - Set Application Screen Brightness Examples

By default, the brightness of the application content depends on the system brightness of the device. The application may look brighter or darker if the user changes the device brightness. However, sometimes you may need to programmatically set the brightness.

Using screen_brightness Package

There is a package named screen_brightness that allows you to set the screen brightness of the application. Since it doesn't set the system brightness, you don't need an additional permission. Using the package is very simple. First, you need to add it to the pubspec.yaml file.

  flutter pub add screen_brightness

After that, you can use it by adding an import statement.

  import 'package:screen_brightness/screen_brightness.dart';

Then, you need to get the instance of ScreenBrightness and call the setScreenBrightness by passing a value whose type is double. The value range must be within 0.0 and 1.0, with 0.0 is the darkest and 1.0 is the brightest.

 await ScreenBrightness().setScreenBrightness(0.5);

In the example below, there is a slider for changing the screen brightness of the application.

  class MyPageState extends State<MyPage> {
  
    double _value = 0.5;
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: Row(
          children: [
            BrightnessIcon(value: _value),
            Expanded(
              child: Slider(
                value: _value,
                onChanged: (double value) async {
                  setState(() {
                    _value = value;
                  });
                  await ScreenBrightness().setScreenBrightness(_value);
                },
              ),
            ),
          ],
        ),
      );
    }
  }
  
  class BrightnessIcon extends StatelessWidget {
  
    final double value;
  
    const BrightnessIcon({super.key, required this.value});
  
    @override
    Widget build(BuildContext context) {
      if (value < 0.4) {
        return const Icon(Icons.brightness_low);
      } if (value < 0.7) {
        return const Icon(Icons.brightness_medium);
      } else {
        return const Icon(Icons.brightness_high);
      }
    }
  }

If you need the application to have discrete values for brightness, you can divide the slider by passing the divisions argument.

In many cases, the setScreenBrightness method may also be called even if the application doesn't have a slider or UI for changing the brightness. For example, when displaying a QR code, the application should set the brightness to maximum.

Summary

This tutorial shows you how to set the screen brightness of a Flutter application. A package named screen_brightness can be used to simplify the process. You also need to know that the brightness level only takes effect on a real device. Therefore, if you try it on an emulator, you may not see any effect when the brightness level is updated.