Flutter改变状态栏字体、状态栏背景颜色、Appbar背景颜色的方式

1. 改变状态栏字体颜色

有2种方式，注意这里只能改变状态栏字体颜色为白色或者黑色

void main() {
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        appBarTheme: AppBarTheme.of(context).copyWith(
          // 方式1
          brightness: Brightness.light,
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          // 方式2,在这里设置的话会覆盖上面的方式1
          brightness: Brightness.dark,
        ),
        body: Container(),
      ),
    );
  }
}

2. 单独改变状态栏背景颜色

单独改变状态栏颜色很简单

SystemUiOverlayStyle uiStyle = SystemUiOverlayStyle.light.copyWith(
  statusBarColor: Colors.red,
);

void main() {
  // 单独改变状态栏颜色
  SystemChrome.setSystemUIOverlayStyle(uiStyle);
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

3. 同时改变状态栏背景颜色和AppBar背景颜色

void main() {
  runApp(
    MaterialApp(
      home: App(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        appBarTheme: AppBarTheme.of(context).copyWith(
          // 方式1
          color: Colors.yellow,
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          // 方式2,在这里设置的话会覆盖上面的方式1
          backgroundColor: Colors.deepPurpleAccent,
        ),
        body: Container(),
      ),
    );
  }
}

总结

在这里强调一下，为什么会有属性被覆盖的情况，其实看源码就知道，在_AppBarState的build方法里，如果brightness为null，就会使用appBarTheme.brightness，而appBarTheme是通过AppBarTheme.of(context)获取的，而该方法的实现实际是Theme.of(context).appBarTheme，backgroundColor同理，如果该属性为null，就会使用theme.primaryColor，而theme是Theme.of(context)获取的。

还有一个地方要注意，如果同时使用SystemChrome.setSystemUIOverlayStyle(uiStyle)方法和3. 同时改变状态栏背景颜色和AppBar背景颜色，则SystemChrome.setSystemUIOverlayStyle(uiStyle)设置的颜色会覆盖3. 同时改变状态栏背景颜色和AppBar背景颜色方法中设置的状态栏颜色，所以如果同时使用的话就可以达到单独设置状态栏颜色和AppBar背景颜色的效果了。

  /// The [ThemeData.appBarTheme] property of the ambient [Theme].
  static AppBarTheme of(BuildContext context) {
    return Theme.of(context).appBarTheme;
  }