Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

Time:2021-4-29

preface

As shown in the figure below: the status bar refers to the position where the mobile phone status information is displayed on the top of the Android mobile phone.
Android has added the transparent status bar function since 4.4. The color background of the status bar can be customized to integrate the titlebar with the status bar and increase the immersion.
Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

As shown in the figure above: the status bar of flutter is black and translucent by defaultHow to remove the black translucent background color of the status bar and make it consistent with the color of the title barWhat about the effect as shown in the figure below?
Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

First of all, you need to find the Android main entry page mainactivity.kt or mainactivity.java in the folder of the flutter project, judge the version number, and then change the color of the status bar to be transparent, because it is black and translucent.
Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

Add the following code on the mainactivity.kt page

//Set the immersion transparency of the status bar (change the black translucency of the flitter status bar to full transparency)
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        window.statusBarColor = 0
    }
}

The complete mainactivity.kt code is as follows:

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

//Introduction
import android.os.Build;
import android.os.Bundle;

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }

    //Set the immersion transparency of the status bar (change the black translucency of the flitter status bar to full transparency)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.statusBarColor = 0
        }
    }
}

Note: by default, the flutter project uses the kotlin language

In Google I / O 2017, Google announced that kotlin replaced Java as the official development language for Android.
Details of kotlin can be found at:https://www.kotlincn.net/

adoptflutter create flutter\_app  Command to create a flutter project, the default is kotlin language mode. If you want to modify it to Java language, run the following command to create the project
flutter create -a java flutter\_app


If it is in Java language mode, modifying the immersive status bar method is the same as above
Mainactivity.java path:
android\\app\\src\\main\\java\\com\\example\\flutter\_app\\MainActivity.java 
Add the following code on the mainactivity. Java page

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;

//Introduction
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);
  }

  //Set the immersion transparency of the status bar (change the black translucency of the flitter status bar to full transparency)
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      getWindow().setStatusBarColor(0);
    }
  }
}

Navigation effect of salted fish bottom realized by flutter

  • As shown in the figure below:  BottomNavigationBar  Navigation bar configuration of components imitating salted fish

Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

int _selectedIndex = 0;
//Create array import page
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    //Drawer menu
    // drawer: new Drawer(),

    //General bottom navigation bar
    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;
    });
}
  • As shown in the figure below:  BottomAppBar  Component navigation bar configuration

Flutter immersive transparent status bar |flutter custom protruding BottomAppBar navigation

int _selectedIndex = 0;
//Create array import page
List pglist = [HomePage(), FindPage(), CartPage(), ZonePage(), UcenterPage(),];

...

Scaffold(
    body: pglist[_selectedIndex],
    
    //Drawer menu
    // drawer: new Drawer(),

    //Bottom bulge depression navigation bar
    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;
    });
}

The realization of immersive status bar + raised navigation bar based on flutter is shared here. I hope it can be helpful.

Finally, a cross end example project of uniapp is attached
Uniapp Live Room imitation tiktok |nvue+uniapp video high imitation live street live broadcast