Flutter沉浸式透明状态栏|flutter自定义凸起BottomAppBar导航

Flutter沉浸式透明状态栏与咸鱼导航实现

最新推荐文章于 2024-07-29 11:14:14 发布

原创

最新推荐文章于 2024-07-29 11:14:14 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #安卓 #Flutter #程序员 #码农

本文介绍了如何在Flutter应用中实现类似咸鱼的底部导航凸起效果，以及如何设置透明状态栏，增强应用的沉浸式体验。在Android端，需要在MainActivity.kt或MainActivity.java中修改状态栏颜色，使状态栏与标题栏颜色一致。同时提供了在Flutter中使用BottomAppBar组件创建凸起和凹陷导航栏的配置方法。

前言

如下图：状态栏是指android手机顶部显示手机状态信息的位置。
android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titleBar能够和状态栏融为一体，增加沉浸感。
360截图20200427012423830.png

如上图：Flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？
360截图20200427022423726.png

360截图20200427022547503.png

首先需要在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java，判断一下版本号然后将状态栏颜色修改设置成透明，因为他本身是黑色半透明。
360截图20200427015824935.png

在MainActivity.kt页面新增如下代码

//设置状态栏沉浸式透明（修改flutter状态栏黑色半透明为全透明）
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        window.statusBarColor = 0
    }
}

完整MainActivity.kt代码如下：

package com.example.flutter_app

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

//引入
imp

最低0.47元/天解锁文章