更改状态栏颜色（颤振）

Question

我正在尝试将电池图标、wifi 图标和时钟图标的颜色更改为某种深色，但我没有成功。 谁能帮我？ 谢谢

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,
          )),
    );
  }
}

截屏

Answer 1

而是更改颜色，我建议您使用SafeArea小部件包裹您的Scaffold 。

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

这将使您的小部件呈现在屏幕上的安全区域。

Answer 2

在 Flutter 更新之后，您可以在 AppBar 中使用此属性来更改颜色状态栏

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

            )),

      );

    }

  }