Building your own Custom Navigation Bar in

In this full-length, beginner-friendly walkthrough video, I will guide you through creating a custom floating navigation bar that you can add to your own #FlutterFlow projects. Sometimes it's nice to have something that looks different from other apps, and this navigation bar is a perfect alternative that you can further customise to your liking.

I will take you through the entire design process using a small starter project (link below). All the steps are included in the video, and if you are learning FlutterFlow, I strongly encourage you to follow along. I will cover important concepts such as components, stack widget and alignment, visibility rules, and much more.

🔥 Consider also joining The Digital Pro's #Nocode Academy on Patreon (link below).

_____

Important Links

👉 FlutterFlow Starter Project: https://app.flutterflow.io/project/cu...
👉 FlutterFlow Final Project: https://app.flutterflow.io/project/cu...

_____

Chapters

00:00 Introduction
00:34 Application Preview
02:59 iOS Simulator Demo
05:33 Starter Project Overview
08:49 Creating the initial component
12:39 Naming convention and adding initial widgets
14:27 Home Icon layout and styling
19:40 Apply a subtle divider animation
22:13 Component Parameters
24:59 Connecting our component parameters
27:35 Creating the additional page icons
28:14 Continue to connect our component parameters
29:44 Adding navigation features to the page icons
31:07 Placing the navigation bar on to our Home Page
33:53 Setting our component parameter + first app test
34:59 Full page selection test + further UX tweaks
37:32 Resolving on screen keyboard issue on mobile
39:03 Safe area & column end spacing
42:07 BONUS: Extending for admin pages
45:18 Outro

_____

🚀 The Digital Pro's NoCode Academy on Patreon: https://www.thedigitalpro.co.uk/patreon
(Support the channel and go ad-free! 😉)

🔥 If you love my content why not consider buying me a coffee, it's really appreciated: https://www.thedigitalpro.co.uk/coffee

👍 Support the channel and grab yourself a free FlutterFlow account by clicking here: https://www.thedigitalpro.co.uk/flutt...

🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.