https://github.com/prolongservices/flutter-bottom-tab-cutout

A flutter project with bottom tab having cutout floating action button, or notched floating action button in bottom tab in flutter
https://github.com/prolongservices/flutter-bottom-tab-cutout

bottom-navigation-bar flutter-bottom-app-bar flutter-bottom-navigation-bar flutter-curved-navigation-bar flutter-navigation

Last synced: 7 months ago
JSON representation

A flutter project with bottom tab having cutout floating action button, or notched floating action button in bottom tab in flutter

• Host: GitHub
• URL: https://github.com/prolongservices/flutter-bottom-tab-cutout
• Owner: prolongservices
• Created: 2020-01-11T04:33:15.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-01-25T05:16:20.000Z (about 6 years ago)
• Last Synced: 2024-11-07T05:20:35.653Z (over 1 year ago)
• Topics: bottom-navigation-bar, flutter-bottom-app-bar, flutter-bottom-navigation-bar, flutter-curved-navigation-bar, flutter-navigation
• Language: Dart
• Size: 53.7 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# flutter bottom navigation bar with fab | flutter curved bottom navigation bar

A flutter project with bottom tab having cutcout floating action button, or notched floating action button in bottom tab in flutter

In this tutorial we will make custom bottom navigation bar in flutter with notched floating action button, you can also say that its curved bottom navigation bar in flutter having docked floating action button.

To achieve this we will use BottomAppBar class with shape property and pass CircularNotchedRectangle() to make our bottom navigation bar a curved shape. To fit the floating action button inside the curve we will use floatingActionButtonLocation property of scaffold and pass FloatingActionButtonLocation.centerDocked. And this will make our floating action button notched to our bottom navigation bar.

# Video tutorial for flutter bottom navigation bar with fab | flutter curved bottom navigation bar

flutter bottom navigation bar with fab | flutter curved bottom navigation bar

[![flutter bottom navigation bar with fab | flutter curved bottom navigation bar](https://img.youtube.com/vi/mg_qmpohz8U/0.jpg)](https://youtu.be/mg_qmpohz8U)