如下图：状态栏是指android手机顶部显示手机状态信息的位置。
android 自4.4开始新加入透明状态栏功能，状态栏可以自定义颜色背景，使titlebar能够和状态栏融为一体，增加沉浸感。
如上图flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？且继续看下文讲述。
在flutter项目目录下找到android主入口页面mainactivity.kt或mainactivity.java，判断一下版本号然后将状态栏颜色修改设置成透明，因为他本身是黑色半透明。
mainactivity.kt路径：android\app\src\main\kotlin\com\example\flutter_app\mainactivity.kt
在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
//引入
import android.os.build;
import android.os.bundle;
class mainactivity: flutteractivity() {
override fun configureflutterengine(@nonnull flutterengine: flutterengine) {
generatedpluginregistrant.registerwith(flutterengine);
}
//设置状态栏沉浸式透明（修改flutter状态栏黑色半透明为全透明）
override fun oncreate(savedinstancestate: bundle?) {
super.oncreate(savedinstancestate);
if (build.version.sdk_int >= build.version_codes.lollipop) {
window.statusbarcolor = 0
}
}
}
注意：flutter项目默认是使用kotlin语言
kotlin 是一种在 java 虚拟机上运行的静态类型编程语言，被称之为 android 世界的swift，由 jetbrains 设计开发并开源。
kotlin 可以编译成java字节码，也可以编译成 javascript，方便在没有 jvm 的设备上运行。
在google i/o 2017中，google 宣布 kotlin 取代 java 成为 android 官方开发语言。
kotlin详情见：
flutter create flutter_app 命令创建flutter项目时，默认是kotlin语言模式，如果想要修改成java语言，则运行如下命令创建项目即可
flutter create -a java flutter_app
如果是java语言模式下，修改沉浸式状态栏方法和上面同理
mainactivity.java路径：android\app\src\main\java\com\example\flutter_app\mainactivity.java
在mainactivity.java页面新增如下高亮代码片段
package com.example.demo1;
import androidx.annotation.nonnull;
import io.flutter.embedding.android.flutteractivity;
import io.flutter.embedding.engine.flutterengine;
import io.flutter.plugins.generatedpluginregistrant;
// 引入
import android.os.build;
import android.os.bundle;
public class mainactivity extends flutteractivity {
@override
public void configureflutterengine(@nonnull flutterengine flutterengine) {
generatedpluginregistrant.registerwith(flutterengine);
}
// 设置状态栏沉浸式透明（修改flutter状态栏黑色半透明为全透明）
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
if (build.version.sdk_int >= build.version_codes.lollipop) {
getwindow().setstatusbarcolor(0);
}
}
}
最后一步，去掉右上角banner提示
return materialapp( title: 'flutter demo', debugshowcheckedmodebanner: true, theme: themedata( primaryswatch: colors.green, ), home: myhomepage(title: 'flutter demo app'), ... );
◆ flutter中实现咸鱼底部导航凸起效果
如上图：bottomnavigationbar组件普通底部导航栏配置
int _selectedindex = 0;
// 创建数组引入页面
list pglist = [homepage(), findpage(), cartpage(), zonepage(), ucenterpage(),];
...
scaffold(
body: pglist[_selectedindex],
// 抽屉菜单
// drawer: new drawer(),
// 普通底部导航栏
bottomnavigationbar: bottomnavigationbar(
fixedcolor: colors.red,
type: bottomnavigationbartype.fixed,
elevation: 5.0,
unselectedfontsize: 12.0,
selectedfontsize: 18.0,
items: [
bottomnavigationbaritem(icon: icon(icons.home), title: text('home')),
bottomnavigationbaritem(icon: icon(icons.search), title: text('find')),
bottomnavigationbaritem(icon: icon(icons.add), title: text('cart')),
bottomnavigationbaritem(icon: icon(icons.photo_filter), title: text('zone')),
bottomnavigationbaritem(icon: icon(icons.face), title: text('ucenter')),
],
currentindex: _selectedindex,
ontap: _onitemtapped,
),
)
void _onitemtapped(int index) {
setstate(() {
_selectedindex = index;
});
}
如上图：bottomnavigationbar组件仿咸鱼凸起导航栏配置
int _selectedindex = 0;
// 创建数组引入页面
list pglist = [homepage(), findpage(), cartpage(), zonepage(), ucenterpage(),];
...
scaffold(
body: pglist[_selectedindex],
// 抽屉菜单
// drawer: new drawer(),
// 普通底部导航栏
bottomnavigationbar: bottomnavigationbar(
fixedcolor: colors.red,
type: bottomnavigationbartype.fixed,
elevation: 5.0,
unselectedfontsize: 12.0,
selectedfontsize: 18.0,
items: [
bottomnavigationbaritem(icon: icon(icons.home), title: text('home')),
bottomnavigationbaritem(icon: icon(icons.search), title: text('find')),
bottomnavigationbaritem(icon: icon(null), title: text('cart')),
bottomnavigationbaritem(icon: icon(icons.photo_filter), title: text('zone')),
bottomnavigationbaritem(icon: icon(icons.face), title: text('ucenter')),
],
currentindex: _selectedindex,
ontap: _onitemtapped,
),
floatingactionbutton: floatingactionbutton(
backgroundcolor: _selectedindex == 2 ? colors.red : colors.grey,
child: column(
mainaxisalignment: mainaxisalignment.center,
children: [
icon(icons.add)
]
),
onpressed: (){
setstate(() {
_selectedindex = 2;
});
},
),
floatingactionbuttonlocation: floatingactionbuttonlocation.centerdocked,
)
void _onitemtapped(int index) {
setstate(() {
_selectedindex = index;
});
}
如上图：bottomappbar组件凸起凹陷导航栏配置
int _selectedindex = 0; // 创建数组引入页面 list pglist = [homepage(), findpage(), cartpage(), zonepage(), ucenterpage(),]; ... scaffold( body: pglist[_selectedindex], // 抽屉菜单 // drawer: new drawer(), // 底部凸起凹陷导航栏 bottomnavigationbar: bottomappbar( color: colors.white, shape: circularnotchedrectangle(), child: row( mainaxisalignment: mainaxisalignment.spacearound, children:[ iconbutton( icon: icon(icons.home), color: _selectedindex == 0 ? colors.red : colors.grey, onpressed: (){ _onitemtapped(0); }, ), iconbutton( icon: icon(icons.search), color: _selectedindex == 1 ? colors.red : colors.grey, onpressed: (){ _onitemtapped(1); }, ), sizedbox(width: 50,), iconbutton( icon: icon(icons.photo_filter), color: _selectedindex == 3 ? colors.red : colors.grey, onpressed: (){ _onitemtapped(3); }, ), iconbutton( icon: icon(icons.face), color: _selectedindex == 4 ? colors.red : colors.grey, onpressed: (){ _onitemtapped(4); }, ), ], ), ), ) void _onitemtapped(int index) { setstate(() { _selectedindex = index; }); }
夜深了，这次就分享到这里，后续计划使用flutter/dart开发一个实例项目，届时再分享。
