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

CodePudding user response：

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.

CodePudding user response：

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")),

            )),

      );

    }

  }