Change Status Bar Color (Flutter)

Question

I am trying to change the color of the battery icon, the wifi icon and the clock icon to some dark color, but I am not succeeding. Can anyone help me? Thanks

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.black,
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.light,
  ));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
          appBar: AppBar(
            title: Text(
              'Flutter',
              style: GoogleFonts.poppins(color: Colors.black),
            ),
            elevation: 0,
            backgroundColor: Colors.transparent,
          ),
          extendBodyBehindAppBar: true,
          body: Container(
            child: Center(child: Text("Hello")),
            color: backgroundUL,
          )),
    );
  }
}

Screenshot

Answer 1

instead change the color, i suggest you to wrap your Scaffold with SafeArea widget.

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: SafeArea(
             child: Scaffold(
                     appBar: AppBar(
                     ......

this will make your widget rendered on safe area on screen.

Answer 2

after Flutter Update you can use this property in AppBar To Change Collor status bar

      class MyApp extends StatelessWidget {

    const MyApp({super.key});

  

  

    @override

    Widget build(BuildContext context) {

      return MaterialApp(

        title: 'Flutter Demo',

        theme: ThemeData(primarySwatch: Colors.blue),

        home: Scaffold(

            appBar: AppBar(

              systemOverlayStyle: const SystemUiOverlayStyle(

                // Status bar color

                statusBarColor: Colors.red,

                // Status bar brightness (optional)

                statusBarIconBrightness: Brightness.dark,

                // For Android (dark icons)

                statusBarBrightness: Brightness.light, // For iO

              ),

              title: const Text(

                'Flutter',

              ),

              elevation: 0,

              backgroundColor: Colors.transparent,

            ),

            extendBodyBehindAppBar: true,

            body: Container(

              child: const Center(child: Text("Hello")),

            )),

      );

    }

  }