{"id":18634544,"url":"https://github.com/prolongservices/flutter-bottom-tab-cutout","last_synced_at":"2025-08-03T04:08:52.891Z","repository":{"id":134005559,"uuid":"233176395","full_name":"prolongservices/Flutter-Bottom-Tab-Cutout","owner":"prolongservices","description":"A flutter project with bottom tab having cutout floating action button, or notched floating action button in bottom tab in flutter","archived":false,"fork":false,"pushed_at":"2020-01-25T05:16:20.000Z","size":55,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-07T05:20:35.653Z","etag":null,"topics":["bottom-navigation-bar","flutter-bottom-app-bar","flutter-bottom-navigation-bar","flutter-curved-navigation-bar","flutter-navigation"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prolongservices.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-11T04:33:15.000Z","updated_at":"2023-09-11T19:44:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"339594a2-a37b-47d4-b203-d2f3ce2a18a4","html_url":"https://github.com/prolongservices/Flutter-Bottom-Tab-Cutout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolongservices%2FFlutter-Bottom-Tab-Cutout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolongservices%2FFlutter-Bottom-Tab-Cutout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolongservices%2FFlutter-Bottom-Tab-Cutout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prolongservices%2FFlutter-Bottom-Tab-Cutout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prolongservices","download_url":"https://codeload.github.com/prolongservices/Flutter-Bottom-Tab-Cutout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231456846,"owners_count":18379556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bottom-navigation-bar","flutter-bottom-app-bar","flutter-bottom-navigation-bar","flutter-curved-navigation-bar","flutter-navigation"],"created_at":"2024-11-07T05:19:25.030Z","updated_at":"2024-12-27T08:22:27.256Z","avatar_url":"https://github.com/prolongservices.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flutter bottom navigation bar with fab | flutter curved bottom navigation bar\n\nA flutter project with bottom tab having cutcout floating action button, or notched floating action button in bottom tab in flutter\nIn 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.\nTo 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.\n\n# Video tutorial for flutter bottom navigation bar with fab | flutter curved bottom navigation bar\n\nflutter bottom navigation bar with fab | flutter curved bottom navigation bar\n\n[![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)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprolongservices%2Fflutter-bottom-tab-cutout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprolongservices%2Fflutter-bottom-tab-cutout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprolongservices%2Fflutter-bottom-tab-cutout/lists"}