flutter沉浸式透明状态栏导航栏实现/状态栏颜色设置

发表于 2022年04月21日
flutter

教你如何使用Flutter制作一个透明沉浸式的状态栏导航栏？或修改状态栏颜色为与你应用主题匹配的颜色？以Flutter 2.0为例，如下图：

目录表

flutter2 沉浸式透明状态栏导航栏实现代码

实现分为Android沉浸式和IOS沉浸式，下面提供的几种方法可根据应用场景进行灵活使用。

方法一：setSystemUIOverlayStyle透明状态栏

使用services方法set状态颜色为透明

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

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
}

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main(){

WidgetsFlutterBinding.ensureInitialized();

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(

statusBarColor: Colors.transparent, // transparent status bar

));

runApp(MyApp());

}

注意，如果您的应用中在man入口使用了AppBar，则该方法会被AppBar的值所覆盖，解决方法是将该方法移至runApp方法后：

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

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
  //透明沉浸式状态栏
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
}

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main(){

WidgetsFlutterBinding.ensureInitialized();

runApp(MyApp());

//透明沉浸式状态栏

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(

statusBarColor: Colors.transparent, // transparent status bar

));

}

方法二：systemOverlayStyle透明状态栏

指定用于与 AppBar 重叠的系统覆盖的样式，如果AppBar与全局设置有重叠覆盖的情况，使用systemOverlayStyle可确保效果完整。

Scaffold(
  appBar: AppBar(
    backwardsCompatibility: false,
    systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  ),
)

Scaffold(

appBar: AppBar(

backwardsCompatibility: false,

systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),

)

方法三：AnnotatedRegion透明状态栏

通过AnnotatedRegion设置当前界面的状态栏及底部导航栏的样式，使用AnnotatedRegion组件包裹Scaffold，支持dark和light两种颜色。

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          // 设置沉浸式状态栏文字颜色
          statusBarColor: Colors.transparent, // transparent status bar
          systemNavigationBarColor: Colors.black, // navigation bar color
          statusBarIconBrightness: Brightness.dark, // status bar icons' color
          systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
        ),
        child: Scaffold(
          body: _getBody(context),
        ),
      ),
    );
  }