flutter设置主题色和状态栏颜色

前言

在App设计中状态栏纯色的这种设计很常见，但是如果状态栏需要为白色的时候就必须为黑色字体。在Android中已经有很多成熟的方案来处理这种情况，那我们现在看看在Flutter中这种情况该怎么处理。

具体设置

1、设置主题色

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.red, primaryColor: Colors.white),  //设置App主题
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

这里的ThemeData即为控制App的主题，primarySwatch设置即可控制主题的各类颜色，但是这里的颜色是需要MaterialColor，但是纯色种的黑色和白色不是MaterialColor。所以不能设置primarySwatch为Colors.white。
注：MaterialColor包含以下这些

• red,
• pink,
• purple,
• deepPurple,
• indigo,
• blue,
• lightBlue,
• cyan,
• teal,
• green,
• lightGreen,
• lime,
• yellow,
• amber,
• orange,
• deepOrange,
• brown,
• blueGrey,

那么就只能使用其他方式设置主题为白色。即为设置

primaryColor: Colors.white

此时我们可以看到App的状态栏如下所示（Android）

 

2.jpg

2、设置状态栏

虽然AppBar变成了白色，但是状态栏是灰色显然不是我们想要的。
尝试设置文字颜色，AppBar的Brightness有两种模式light和dark

appBar: PreferredSize(
    child: AppBar(
    brightness: Brightness.dark,
    title: Center(
         child: Text(
          "FlutterDemo",
        ),
      ),
   ),
  preferredSize: Size(double.infinity, 60)
),

这个和SystemUiOverlayStyle的light和dark刚好相反

final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
      ? SystemUiOverlayStyle.light
      : SystemUiOverlayStyle.dark;

然后设置状态栏颜色

import 'dart:io';
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());

  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.red,
//        statusBarBrightness: Brightness.light,
//        statusBarIconBrightness: Brightness.dark
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

    print("systemUiOverlayStyle");
  }
}

设置为红色之后，得到以下的样式，可以看到状态栏为红色了，文字为白色

 

3.jpg

那么接下来我们只需要将状态栏设置为白色或者透明，状态栏文字设置为黑色。

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

  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,  //设置为透明
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

最后得到以下视图

 

1.jpg

3、推荐AppBar的使用方式

注：使用PreferredSize包裹，可以更得心应手哦！

//      appBar: PreferredSize(
//          child: Container(
//             double.infinity,
//            height: double.infinity,
//            decoration: BoxDecoration(color: Colors.white, boxShadow: [
//              BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.2), blurRadius: 10.0)
//            ]),
//            child: SafeArea(
//                child: Center(
//              child: Text("FlutterDemo",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
//            )),
//          ),
//          preferredSize: Size(double.infinity, 60)),
      appBar: PreferredSize(
          child: AppBar(
            backgroundColor: Colors.white,
            brightness: Brightness.light,
            title: Center(
              child: Text(
                "FlutterDemo",
              ),
            ),
          ),
          preferredSize: Size(double.infinity, 60)),

4、其他注意事项

SystemUiOverlayStyle在设置时其实有很多系统或者版本的限制

  /// The color of top status bar.
  ///
  /// Only honored in Android version M and greater.
  final Color statusBarColor;   //设置状态栏颜色，只在Android的M版本以上生效

  /// The brightness of top status bar.
  ///
  /// Only honored in iOS.
  final Brightness statusBarBrightness;  //状态栏亮度，只在IOS生效，只有light和dart模式

  /// The brightness of the top status bar icons.
  ///
  /// Only honored in Android version M and greater.
  final Brightness statusBarIconBrightness;  //状态栏Icon亮度，只在Android的M版本以上生效，只有light和dart模式，和AppBar的brightness相反

其他相关参考

[Flutter]使用主题
flutter设置沉浸式状态栏

完整代码

https://github.com/leiyun1993/FlutterDemo-GankIO）

作者：Yun丶Lei
链接：https://www.jianshu.com/p/5cde325e6e05
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。