Flutter设置沉浸式状态栏

1,873 阅读1分钟

前言

原生的flutter状态栏可能与我们的ui界面不太想匹配,这个时候就需要自定义状态栏的背景和字体颜色。

第一步 导包

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

第二步 设置

void main() {
  runApp(MyApp());
  if (Platform.isAndroid) {
    // 以下两行 设置android状态栏为透明的沉浸和黑色字体颜色。写在组件渲染之后,是为了在渲染后进行set赋值,覆盖状态栏,写在渲染之前MaterialApp组件会覆盖掉这个值。
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
      // systemNavigationBarColor: Color(0xFF000000),
      // systemNavigationBarDividerColor: null,
      statusBarColor: Colors.transparent, // 设置状态栏背景显示颜色
      // systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.dark, // 设置状态栏字体显示颜色---(注意只有dark和light两种颜色)
      // statusBarBrightness: Brightness.light,
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

一般只需要设置statusBarColorstatusBarIconBrightness就可以满足我们的开发需求了

第三步 重启

修改完系统方面的设置必须要重新启动项目才能生效