FlutterFlow for Beginners - Building your own Custom Navigation Bar in #FlutterFlow - Full walkthrough

5.0 (0)

10 learners

What you'll learn

This course includes

48.5 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

android app development flutterflow flutterflow crashcourse flutterflow marketplace flutterflow training flutterflow tutorial flutterflow tutorial for beginners flutterflow tutorial playlist ios app development learn flutterflow no code tutorial nocode tutorial

Full Transcript

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/custom-navigation-starter-k8e8pi 👉 FlutterFlow Final Project: https://app.flutterflow.io/project/custom-navigation-final-s47c9d _____ 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/flutterflow 🎉 Your love is much appreciated ... A like to this video is like a High Five!!! Thank you all.