bottom-navigation | Example of Android BottomNavigationView | Android library

I'm new to Flutter (and the Dart programming language) and I'm struggling with translating the tabs on the BottomNavigationBarItem. I'm currently basing my code heavily on Andrea Bizzotto's Bottom Navigation Bar with Multiple Navigators.

Here's what I have so far:

Setup:

I'm trying to override the colour of the bottom navigation icon from material UI [here][1]. This is my css code:

In my app I have a bottom navigation component set up as such:

I am having trouble with v-bottom-navigation hide-on-scroll on route change. If I am on a route with scrollable content and I scroll down then up, it works as expected - the bottom nav is hidden. Then, on route change to a page with no scrollable content, the bottom nav is inaccessible. There is no obvious way to reset its tranform style that hide-on-scroll set, other than go to a page with scrollable content, then scroll down.

Repro: codePen

1. scroll to bottom of page 1, then scroll up (bottom nav is transitioned)
2. nav to page 2 (hamburger button)
3. Nav is transitioned off-screen

I'm creating this app, and I added a bottom navigation bar, and everything is working just fine, except the background color. I would like the background to change depending which item has been selected. It works just fine when I use type: BottomNavigationBarType.shifting, but not when I change it to type: BottomNavigationBarType.fixed.

The thing is that I don't like the "shifting" behavior, I prefer it "fixed".

I found this example online, but it uses the shifting type:

This is complicated but, I have a section in my app (the "run" section) which has a bottom navigation bar with 4 icons/fragments. When I "run" the first time it all works well. When I "run" the second time the app crashes as soon as I click on one of the items in a recyclerview listed in the main/default (or first) fragment of the navigation bar. The error I receive is:

I use a BottomNavigationView from the material library: const val material = "com.google.android.material:material:1.4.0-rc01"

and set/update a badge on it using the following binding:

I am trying out the Android's BottomNavigationView implementation as per Material Design

However, on the MainActivity code I am getting a warning that OnNavigationItemSelectedListener is deprecated - see the below snapshot

Have tried get an alternative method to work with the BottomNavigationView but I cannot find it.

Looking for help from anyone with a way out but in the meantime I have matched my BottomView's menu items ids with the fragment destination ids and I successfully achieved Navigation but with a limitation of not being able to update my toolbar title with the Fragment's name.

I'm tryin to add a bar at the bottom of my ElectronJS application and I'd like it to be positioned in the same way as the blue bottom bar in VSCode, where the scroll bar ends/stops above it.

Unfortunately, there always seems to be a small space on the right side where the scroll bar would appear when the content overflows (I don't want to disable the scroll bar / behavior with things such as overflow: hidden; See Edit 2).

I did some testing and with the code below you can see my desired behavior seems to happen with the nav-drawer, i.e. its scroll bar stops right above the v-bottom-navigation, which would be my bottom bar (the thick grey line you see is the scroll bar).

I'm semi-new to this, but I can't figure out why exactly that happens and how to modify it in order to get the same behavior for the whole application.

VueComponent.vue