How to Change the Screen Brightness with Flutter App

If you are building a utility app with Flutter with features like changing brightness; then, look at the example below. It is very easy, we have used Slider() widget to change the brightness and package to set the brightness.

First of all, add screen Flutter package to your dependency by adding the following line in pubspec.yaml file. 

dependencies:
  flutter:
    sdk: flutter
  screen: ^0.0.5

Now add the following permission to android/app/src/main/AndroidManifest.xml before <application> tag.

<uses-permission android:name="android.permission.WAKE_LOCK"/>

// Import package
import 'package:screen/screen.dart';

// Get the current brightness:
double brightness = await Screen.brightness;

// Set the brightness:
Screen.setBrightness(0.5);

// Check if the screen is kept on:
bool isKeptOn = await Screen.isKeptOn;

// Prevent screen from going into sleep mode:
Screen.keepOn(true);

import 'package:flutter/material.dart';
import 'package:screen/screen.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
         home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget{
  @override
  _HomePageState createState(){
    return _HomePageState();
  } 
}

class _HomePageState extends State<HomePage> {

  double screenbrightness = 0.5;
  //brightness must be double value rainding 0.0 - 1.0

  @override
  void initState() {

    Future.delayed(Duration.zero,() async { //there is await function, so we use Future.delayed
        double brightness = await Screen.brightness; //get the current screen brightness
        if(brightness > 1){
           brightness = brightness / 10; 
           // sometime it gives value ranging 0.0 - 10.0, so convert it to range 0.0 - 1.0
        }
        print(brightness);
        setState(() {
            screenbrightness = brightness;
            //change the variable value and update screen UI

        });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue[100], //background color of scaffold
        appBar: AppBar(
            title:Text("Change Screen Brightness"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
        body: Container(
          child:Column(children: [
               Container( 
                 margin: EdgeInsets.only(top:60),
                 child: Text("Chnage Screen Brightness")
               ),
               Container( 
                 child: Text("Brightness Value: $screenbrightness")
               ),
               Container( 
                 child: Slider( //add the slider to configure brightness
                   min: 0.0,
                   max: 1.0,
                    onChanged: (value){ //this function will be executed when slider value is changed
                      Screen.setBrightness(value); //set screen brightness with slider value
                      setState(() {
                        screenbrightness = value; //update the UI
                      }); 
                    }, 
                    value: screenbrightness, //set default slider value
                 )
               )
          ],)
        )
     );
  }
}

In this way, you can change screen brightness with dart code in Flutter app.

No any Comments on this Article


Please Wait...