flutter app 安卓导航栏透明背景问题

原创已于 2022-12-12 11:41:22 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #flutter

于 2022-06-27 10:33:34 首次发布

flutter入门专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在Flutter应用中实现安卓平台的导航栏背景透明。通过引入'package:flutter/services.dart'模块，然后根据平台判断，使用SystemChrome.setSystemUIOverlayStyle方法设置SystemUiOverlayStyle，将statusBarColor设为透明，从而达到透明导航栏的效果。文中提供了两种不同的设置方式，并给出了完整的代码示例。

flutter app 安卓导航栏透明背景问题

设置前

设置前的效果

设置后

设置后的效果
一，引入模块

import 'package:flutter/services.dart';

二，设置
代码详情

主要代码

 if (Theme.of(context).platform == TargetPlatform.android) {
      // android 平台
      SystemUiOverlayStyle _style =
      SystemUiOverlayStyle(statusBarColor: Colors.transparent);
      SystemChrome.setSystemUIOverlayStyle(_style);
    }

方法二

 WidgetsFlutterBinding.ensureInitialized();
  // 设置状态栏
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    // 顶部状态栏颜色
    statusBarColor: Colors.transparent,
    // 顶部状态栏图标的亮度
    statusBarIconBrightness: Brightness.dark,
    // 顶部状态栏的亮度
    statusBarBrightness:
        !kIsWeb && Platform.isAndroid ? Brightness.dark : Brightness.light,
    // 系统底部导航栏的颜色
    systemNavigationBarColor: Colors.white,
    // 系统底部导航栏分割线颜色
    systemNavigationBarDividerColor: Colors.transparent,
    // 系统导航栏图标的亮度
    systemNavigationBarIconBrightness: Brightness.dark,
  ));

总结

SystemUiOverlayStyle style = const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.light,
      systemNavigationBarIconBrightness: Brightness.light);
  SystemChrome.setSystemUIOverlayStyle(style);