Flutter笔记(三)：设置白色状态栏

2019-08-16 本文已影响0人 Yun丶Lei

前言

在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(
//            width: 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设置沉浸式状态栏