FLUTTER Animated Custom Bottom Navigation Bar with Custom Clipper

FLUTTER Animated Custom Bottom Navigation Bar with Custom Clipper | Flutter Tutorial

Рет қаралды 1,317

Күн бұрын

In this video, we'll build a completely custom-animated Bottom Navigation Bar in Flutter from scratch! We'll use built-in widgets and classes to achieve smooth animations and a unique shape with a Custom Clipper. No external packages are needed! Stick around until the end for the full implementation and subscribe for more awesome Flutter content. #technology #knowledge
📌 Get the Source Code:
➡️ github.com/AmirBayat0/Flutter...
⚡ Subscribe for more content:
ProgrammingWithFlexz: ‪@ProgrammingWithFlexZ‬
📱 Discover a wealth of Flutter resources!
🚀 +100 Flutter Examples available on my GitHub
👉👉 github.com/AmirBayat0/
🪐 Over 200 Flutter-related posts on my Instagram
👉👉 / codewithflexz
☄ Explore more on my social media platforms via this link
👉👉 zaap.bio/CodeWithFlexz
💖 Grateful for Your Support!
Your encouragement fuels my journey! Remember to like and subscribe for fresh content. Let's code, learn, and thrive together! 🧡
Discovering value in this video? If you find it valuable and wish to endorse my work, why not treat me to a coffee? ☕️ Your support truly fuels my endeavors!
👉👉 Click here: www.buymeacoffee.com/amirbayat
#flutterdevelopment #fluttertutorial #customnavigation #bottomnavigationbar #flutteranimations #customclipper #flutterwidgets #uiuxdesign #mobileappdevelopment #flutterfromscratch
🔊 License:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔻
GalaxyTones - Synesthesia" is under a Creative Commons (BY 3.0) license:
creativecommons.org/licenses/...
/ galaxytones
Music powered by BreakingCopyright:
• • 📰 Corporate Background...
🔺
🔻
Alex Productions - Pop" is under a Creative Commons (BY 3.0) license:
creativecommons.org/licenses/...
/ @alexproductionsnocopy...
Music powered by BreakingCopyright:
• 📇 • 📇 Free Corporate Soft ...
🔺
🔻
Scandinavianz - Baikal" is under a Creative Commons (BY 3.0) license:
creativecommons.org/licenses/...
/ @scandinavianz
Music powered by BreakingCopyright:
• 🚤 Easy Listening (Free...
🔺
🔻
Alex Productions - Lost" is under a Creative Commons (BY 3.0) license:
creativecommons.org/licenses/...
/ @alexproductionsnocopy...
Music powered by BreakingCopyright:
• 🏗️ • 🏗️ Free Corporate Back...
🔺
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
📚 Chapters:
⌨️ (00:00:00) Introduction to the Project: Get an overview of the project's goals and objectives.
⌨️ (00:00:50) Introducing Pre-Written Codes: Discover the essential pre-written codes that will serve as the foundation.
⌨️ (00:01:05) Application Responsive Dimensions: Learn how to make your application responsive across different devices.
⌨️ (00:01:39) Developing FinalView: Create a comprehensive screen for the bottom navigation bar and all its navigable screens.
⌨️ (00:03:13) Developing a Custom Bottom Nav Bar: Design and implement a custom bottom navigation bar for seamless navigation.
⌨️ (00:05:07) Creating a Reusable Stateless Class: Build a reusable stateless class for each item in the bottom navigation bar.
⌨️ (00:10:48) Adding an Animated Indicator: Enhance user experience with an animated indicator at the top of each selected item.
⌨️ (00:12:44) Crafting a Custom Clipper for Indicator Decoration: Achieve a unique look with a fading gradient and custom-shaped yellow effect below the indicators.
⌨️ (00:15:43) Utilizing PageView for Navigation: Learn how to navigate between different pages using PageView when the selected item changes, loading the respective page dynamically.
⌨️ (00:18:35) 🚀✨ Don't Miss Out! SUBSCRIBE NOW! 🔔👇 #JoinUs: Stay updated with the latest tutorials and projects. Subscribe now!

Пікірлер: 26

Ай бұрын

Come on guys, let's like and share, so far 89 views and only 21 likes, let's help those who help us. 👏🏼👏🏼💪🏼

@ProgrammingWithFlexZ Ай бұрын

Thank you so much for the support and encouragement! 🙏😊 Let's spread the word and help more learners. 📚🌍 Every like and share helps get the content to those who might find it useful. 👍📢 Your enthusiasm and support mean the world to me and really motivate me to keep creating more content. 🎨💡 Thanks for being such a loyal supporter; I feel blessed to have you. 🙌💖 Thank you! Thank you again for being such an amazing supporter! 💪🏼✨

@ProgrammingWithFlexZ Ай бұрын

👋 Hey there, everyone! I would love your support! Please consider ✨ 𝗦𝘂𝗯𝘀𝗰𝗿𝗶𝗯𝗶𝗻𝗴, 💬 𝗖𝗼𝗺𝗺𝗲𝗻𝘁𝗶𝗻𝗴, 👍 𝗟𝗶𝗸𝗶𝗻𝗴, 📤 𝗦𝗵𝗮𝗿𝗶𝗻𝗴 the content! Your support means the world to me. Thank you so much! 🙏

@Mertcelikk0 Ай бұрын

I saw it on Instagram, when I examined your channel, I really liked your content. I follow even though I am a React Native developer.

@ProgrammingWithFlexZ Ай бұрын

Thank you for checking out my channel and for the kind words! 😊 It’s awesome to hear that you enjoy the content, even as a React Native developer. Your support means a lot to me. Happy coding and feel free to reach out anytime! 🌟

@mahdimax8224 Ай бұрын

Nice contents for flutter learners, I have been following your channel for a while and I learned alot of useful information👏🏼👏🏼

@ProgrammingWithFlexZ Ай бұрын

Thank you so much for your kind words! 😊 I'm thrilled to hear that you've found the content helpful. Your support means the world to me and motivates me to keep creating more useful information for Flutter learners. Keep learning and coding 👏🏼👏🏼

@user-cp7dm2mq2s Күн бұрын

Hello. I am using BottomNavigationBar and I want to use two features. The first one is like in Facebook or WhatsApp: when the user is on a page other than the home page and presses the back button on the mobile, I do not want to exit the application but return to the home page, and upon pressing the back button again, the application exits. The second feature is when you are on the home page and in a scrolling state, pressing the back button should scroll to the top of the page, and when pressed again, it exits the application. How can this be implemented in Flutter, please?❤

@safegame1751 Ай бұрын

Fantastic🔆, Truly enjoyed how you create it from scratch 😀 👍

@ProgrammingWithFlexZ Ай бұрын

Thank you so much! 🔆 I'm really glad to hear you enjoyed the process. Your positive feedback truly inspires me! 😀👍

@MrTofighi Ай бұрын

I think it has become very attractive, it was great 🎉

@ProgrammingWithFlexZ Ай бұрын

Thank you so much! I'm glad you think so. Your feedback means a lot 🎉😊

@hackers098verma Ай бұрын

Bhai Sera yrr

@ProgrammingWithFlexZ Ай бұрын

Thank you so much, my friend!♥️

@rebazjabar7660 Ай бұрын

Please do it with gourouter and riverpod

@ProgrammingWithFlexZ Ай бұрын

Using the 'Go_router', I've covered it before. Check out this video: (kzfaq.info/get/bejne/qpamh5tklpjXg4k.htmlsi=fJnYjc-m4BRKkpWU). Also, take a look at this playlist for various tutorials on the bottom navigation bar topic (kzfaq.info/sun/PLWhSmdyhZUVTqINFLgiUntaEMjI-F0Oul&si=LXPdEbfHULko1qGD) Regarding Riverpod, I'll plan to create a tutorial about it in the coming weeks. Thanks for the idea! If you need more help, feel free to reply to this comment! 👍

@usmanmarkaz Ай бұрын

sir please please can you make it in React Native please

@ProgrammingWithFlexZ Ай бұрын

Hey pal! 😃 Thanks for your comment! Honestly, I'm not a total pro at ReactNative yet, but I'll dig into how to create that kind of bottom navigation bar you're looking for. 🔍 I'll get back to you with a link to some helpful resources soon! 📚✨