Flutter 实现透明沉浸式状态栏

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

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

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

修改 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 语言

在 Google I/O 2017 中，Google 宣布 Kotlin 取代 Java 成为 Android 官方开发语言。

通过 flutter create flutter_app 命令创建 flutter 项目时，默认是 Kotlin 语言模式，如果想要修改成 Java 语言，则运行如下命令创建项目即可

flutter create -a java flutter_app

如果是 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);     }   } } 

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(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: <Widget>[                 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 实现沉浸式状态栏+仿咸鱼底部凸起导航栏就分享完了，希望能有些帮助！