Transparent Android system navigation bar with Flutter and FlexColorScheme package.

Related tags

Navigation sysnavbar
Overview

Sysnavbar with FlexColorScheme

Transparent Android system navigation bar with Flutter and FlexColorScheme.

FlexColorScheme V4 Notice

If you are using FlexColorScheme version 4 and Flutter 2.5 or later, then this example is obsoloete. FlexColorScheme V4 together with Flutter 2.5 or later, support transparent Android system navigation bar without any of the setups discussed here.

About this Example

This an extra Android companion example to the Flutter package FlexColorScheme. For more information about FlexColorScheme and its usage please refer to its readme file on pub.ev as well as its API documentation there.

This example is a variation of example nr 5 bundled with the package and shows how FlexColorScheme can be used to make a transparent system navigation bar in Flutter Android applications.

NOTE:
The static helper FlexColorScheme.themedSystemNavigationBar(context, ...) is designed to provide a convenience wrapper for a SystemUiOverlayStyle that works for screens that use and adhere to current theme mode colors.

If your application use screens that do not follow the current theme, then just use SystemUiOverlayStyle directly in the annotated region for such screens to define their desired style. You can also make your own convenience wrapper function or even just a const value for it if you need to use a fixed style and design frequently.

Change log

[1.1.0] March 21, 2021:
Updated to use FlexColorScheme 2.1.0 and added a show/hide divider on top of system navigation bar on the HomePage.

[1.0.0] March 15, 2021:
Updated to sound null safety and to use FlexColorScheme 2.0.0.

[0.1.0] Jan 18, 2021:
First version released with FlexColorScheme 1.4.0.

Android setup

To make transparent system navigation bar in Flutter you must also make this change to them MainActivity.kt file in your Flutter Android embedder:

in ../android/app/src/main the default MainActivity.kt for your project:

package com.rydmike.sysnavbar  // Replace with your package name

import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
}

is changed to:

package com.rydmike.sysnavbar  // Replace with your package name

import android.os.Build
import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            window.setDecorFitsSystemWindows(false)
        }
    }
}

Additionally, you must use Android SDK 30 to build the Flutter Android project, so you also need to update your build.gradle file in ../android/app from:

 :
android {
compileSdkVersion 29

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        applicationId "com.rydmike.sysnavbar"
        minSdkVersion 16
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
  :

to be:

 :
android {
compileSdkVersion 30

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        applicationId "com.rydmike.sysnavbar"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
  :

You can find additional info and discussion about transparent system navigation in Flutter Android apps in Flutter issue 69999, it was that discussion that lead me to adding this experimental support for it in FlexColorScheme.

Support both transparent and color branded sysnavbar

When you want to use color branded system navigation bar it is best to never put any transparency on it if it is not supported. Adding transparency to the system navigation bar color when it is not supported, will just make the color on it transparent and show the default scrim color used on the system navigation bar. This will not look very nice.

If you design your app to use transparent system navigation bar when it is supported, and then want to use and have a nice looking color branded background colored system navigation bar, when transparency is not supported, then we must check which Android SDK level the application is running on and adjust the behaviour accordingly. We can use the package device_info to get the Android SDK level and keep the opacity as 1 when SDK level is below 30.

This example presents one suggestion on how this can be implemented, and the different approach to the design for the use cases.

In the sub-page in this example, it also shows how you can use a fully transparent system navigation bar when possible, and for the case when this is not possible, a color branded opaque one. Then combine this with a same background primary color branded Material BottomNavigationBar using a slight transparency. For the case that support transparency on the system navigation bar, when it is placed on top of this BottomNavigationBar with its slight transparency, it makes BottomNavigationBar and system navigation bar look like one shared translucent bottom area, with content scrolling behind it.

For the case when the system navigation bar transparency is not supported, it still has the same color as the BottomNavigationBar, but without the transparency, so it does not clash so badly with it. The BottomNavigationBar still keeps it slight transparency, and we can at least see content scrolling behind it.

Instead of just transparency on the bottom navigation bar, you can add a container to it with blur filter in it, you can then recreate the iOS frosted glass blur effect and have that on the system navigation bar too. This is not shown in this demo, but is e.g. used by one of the configuration options offered for Material BottomNavigationBar in Flexfold.

The end result is an app looking like the left one, when transparency is supported and like the right one, when it is not. I kind of like it.

This setup also supports the much smaller Android system navigation bar you get when the phone is configured to use gestures. Some Android implementations don't even use a visible system navigation bar when gestures are enabled, this configuration also works with such Android implementation, like e.g. OnePlus gestures.

System navbar transparent

Please note that phones with API30 (Android 11), were when this was written (Jan 16, 2021) still very rare, and at the time did not even register on statcounter. This will improve over time.

You might also like...

A Flutter package for easily implementing Material Design navigation transitions.

A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Jan 7, 2023

Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested routes.

Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested routes.

Routemaster Hello! Routemaster is an easy-to-use router for Flutter, which wraps over Navigator 2.0... and has a silly name. Features Simple declarati

Jan 3, 2023

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0 (Router). If you love Flutter, you would love declarat

Jun 28, 2022

Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Riverpod navigation If you are interested in the motivation why the package was created and a detailed description of what problems it solves, read th

Dec 13, 2022

Elegant abstraction for complete deep linking navigation in Flutter

Elegant abstraction for complete deep linking navigation in Flutter

Flutter Deep Link Navigation Provides an elegant abstraction for complete deep linking navigation in Flutter. This package only provides deep linking

Dec 27, 2022

flutter bottom navigation bat project

bottom_navigation A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Sep 23, 2021

Flutter Material Design Navigation Drawer Menu

Flutter Material Design Navigation Drawer Menu

navigation_drawer_menu Flutter Material Design Navigation Drawer Menu Navigation drawer is a common UI pattern for adaptive menus. The Material Design

Dec 12, 2022

Flutter custom BottomBar Navigation Widget

Flutter custom BottomBar Navigation Widget

bottom_bar_with_sheet 💥 Non-standard way to use more space of screens in your application 💥 😳 Custom bottom Sheet under Bottom Navigation Bar 😳 😩

Dec 23, 2022

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Português The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Jan 4, 2023
Comments
  • Why FlexColorScheme.themedSystemNavigationBar can't modify systemNavigationBarIconBrightness?

    Why FlexColorScheme.themedSystemNavigationBar can't modify systemNavigationBarIconBrightness?

    My English is not very good, please forgive me.

    When I use 3-button navigation, I find that I can't customize systemNavigationBarIconBrightness in the light background, which causes the button can't see clearly.

    I read the source code and find that, systemNavigationBarIconBrightness is set automatically according to DarkMode, and the interface is not exposed for developer to customize.

    systemNavigationBarIconBrightness:
              isDark ? Brightness.light : Brightness.dark,
    

    This creates a problem, that is, not all people use Gesture navigation, many people use 3-button navigation. This will not achieve that effect.

    So I think we should add a method that can modify systemNavigationBarIconBrightness, and only take effect above Android R. under Android Q just follows the FlexColorScheme rule.

    I wonder if you think this requirement is reasonable?

    opened by liyuhaolol 9
Owner
Rydmike
Works with software for building management and energy efficiency. Flutter rocks!
Rydmike
A Flutter package for easy implementation of curved navigation bar

curved_navigation_bar pub package A Flutter package for easy implementation of curved navigation bar. Add dependency dependencies: curved_navigation

null 556 Dec 9, 2022
Fast code and awesome design-ui for flutter navigation bar

Flutter-awesome-bottom-navigation-bar ??‍?? Fast code and awesome design-ui for flutter navigation bar ?? Getting Started # First you need to add flas

Hmida 20 Nov 22, 2022
A Custom Extended Scaffold with Expandable and Floating Navigation Bar

Custom Extended Scaffold Custom Flutter widgets that makes Bottom Navigation Floating and can be expanded with much cleaner a

Ketan Choyal 139 Dec 10, 2022
A Flutter implementation of a customizable navigation bar with animations.

A heavily customizable bottom navigation bar with some animation modifiers.

null 1 Jun 17, 2022
Custom Bottom navigation bar on Flutter.

Intro Custom Bottom navigation bar on Flutter. The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font cu

Ihab Zaidi 2 Oct 8, 2021
Customized 🚀 Bottom Navigation Bar Using Flutter 🐦

Customized ?? Bottom Navigation Bar Using Flutter ??

AmirHossein Bayat 3 Dec 7, 2022
Persistent Bottom Navigation Bar

Persistent Bottom Navigation Bar A persistent/static bottom navigation bar for Flutter. NOTE: Those migrating from pre 2.0.0 version should check the

Bilal Shahid 421 Dec 20, 2022
A bottom navigation bar that you can customize with the options you need, without any limits.

Bottom Personalized Dot Bar A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the a

null 103 Oct 20, 2022
Flutter Flows made easy! A Flutter package which simplifies navigation flows with a flexible, declarative API.

Flutter Flows made easy! Usage Define a Flow State The flow state will be the state which drives the flow. Each time this state changes, a new navigat

Felix Angelov 337 Dec 31, 2022
A flutter navigation package

Create By Me(Agalaba Ifeanyi Precious) go Navigate Navigate Like a pro from one Screen to another Using go navigate. go_Navigate provide you the abili

Agalaba Ifeanyi Precious 2 Oct 11, 2021