[Flutter 实战] 设置沉浸式状态栏(Status Bar)

在此记录项目中所遇到问题及解决方案

1. 全局设置

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

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

  if(Platform.isAndroid){
    SystemUiOverlayStyle style = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      ///这是设置状态栏的图标和字体的颜色 
      ///Brightness.light  一般都是显示为白色
      ///Brightness.dark 一般都是显示为黑色
      statusBarIconBrightness: Brightness.light
    );
    SystemChrome.setSystemUIOverlayStyle(style);
  }
}

2. 单个页面设置

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

class test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return Text('Body');
  }
}

单个页面设置时未解决的问题:

设置AppBar之后,这行代码会失效SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

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

class test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
    );
  }
}

2019-06-11 补:
看了app_bar.dart 源码,发现既然是取反,难怪一直没有效果。

    final Brightness brightness = widget.brightness
      ?? appBarTheme.brightness
      ?? themeData.primaryColorBrightness;
    final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
      ? SystemUiOverlayStyle.light
      : SystemUiOverlayStyle.dark;

所以如果想要Status Bar是亮色,就要设置AppBar 的 brightness 为 Brightness.dark

Scaffold(
        appBar: AppBar(brightness: Brightness.dark)
)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容