我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。


当前回答

对于那些有iOS和Android颜色不一致的问题的人来说,这个方法对我来说很管用:

import 'dart:io';

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

return AppBar(
      systemOverlayStyle: (Platform.isIOS)
          ? SystemUiOverlayStyle.light
          : const SystemUiOverlayStyle(
            statusBarColor: pbsBlue,
            statusBarIconBrightness: Brightness.light,
            statusBarBrightness: Brightness.light,
          ),
      backgroundColor: Colors.blue,
      title: Text('Home'),
    );

请注意,这是AppBar可重用小部件的摘录。

其他回答

现有的解决方案对我没有帮助,因为我不使用AppBar,而且我不想在用户切换应用程序主题时做出声明。我需要一种反应式的方式来切换亮暗模式,发现AppBar使用了一个名为Semantics的小部件来设置状态栏的颜色。

基本上,我是这样做的:

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);

语义从package:flutter/material.dart导入。 SystemUiOverlayStyle从package:flutter/services.dart导入。

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

这(在脚手架内部)创建了一个带有浅色内容的黑色状态栏。(没有Appbar)

appBar: AppBar(
      toolbarHeight: 0,
      backgroundColor: Colors.black,
      systemOverlayStyle: SystemUiOverlayStyle.light,
    ),

首先你要导入这一行:

import 'package:flutter/services.dart';

然后你可以在main中使用下面这一行代码。飞镖文件

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.amber, // navigation bar color
statusBarColor: Colors.white, // status bar color
statusBarIconBrightness: Brightness.dark, // status bar icon color
systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
));

注意:如果你沿着这个陡坡走。因此你可以控制整个屏幕。但是如果你控制单个屏幕状态栏的颜色,那么你可以试试这个…

import 'package:flutter/services.dart';

Widget build(BuildContext context) {
 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: Colors.transparent,
));
}

完整的示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.red, // navigation bar color
        systemNavigationBarIconBrightness: Brightness.light, //navigation bar icons' color
      ),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: const Text('data'),
          systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
            statusBarColor: Colors.red,
            statusBarIconBrightness: Brightness.light,
          ),
        ),
      ),
    );
  }
}