Animated active tab indicator in a custom bottom navigation bar, custom paint, and animated opacity
In this tutorial, we will create a custom bottom navigation bar with an animated active tab indicator. To achieve this we will use custom paint and animated opacity. We will display SVG icons. Also, a nice feature is that we will popUntilRoot in a tab if we click the save tab we already have open and we navigated someone deeper there.
Environment:
macOS 13.0.1 (22A400)
Flutter 3.3.9
Outline:
00:00 - Intro
00:36 - Covering half of the simulator
01:18 - Scroll under the custom bottom navigation bar
02:59 - Adding tabs, the basic structure
05:27 - Adding icons, display SVGs, tabbar height, and layout
11:00 - Adding blur
12:16 - Display active icon
16:52 - Implementing indicator with animation
23:10 - Fix on smaller devices
23:55 - popUntilRoot if click the same tab