{"id":18712367,"url":"https://github.com/codenameakshay/flutter-floating-bottom-bar","last_synced_at":"2025-08-20T22:32:22.212Z","repository":{"id":55051851,"uuid":"384207690","full_name":"codenameakshay/flutter-floating-bottom-bar","owner":"codenameakshay","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-23T12:05:40.000Z","size":2601,"stargazers_count":28,"open_issues_count":6,"forks_count":18,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T22:24:15.623Z","etag":null,"topics":["flutter"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_floating_bottom_bar","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codenameakshay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-07-08T17:54:53.000Z","updated_at":"2025-03-17T03:56:40.000Z","dependencies_parsed_at":"2024-11-07T12:55:33.025Z","dependency_job_id":null,"html_url":"https://github.com/codenameakshay/flutter-floating-bottom-bar","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/codenameakshay/flutter-floating-bottom-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codenameakshay%2Fflutter-floating-bottom-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codenameakshay%2Fflutter-floating-bottom-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codenameakshay%2Fflutter-floating-bottom-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codenameakshay%2Fflutter-floating-bottom-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codenameakshay","download_url":"https://codeload.github.com/codenameakshay/flutter-floating-bottom-bar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codenameakshay%2Fflutter-floating-bottom-bar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271397965,"owners_count":24752641,"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","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["flutter"],"created_at":"2024-11-07T12:42:34.910Z","updated_at":"2025-08-20T22:32:22.205Z","avatar_url":"https://github.com/codenameakshay.png","language":"Dart","funding_links":["https://www.paypal.me/codenameakshay"],"categories":[],"sub_categories":[],"readme":"\u003c!--\nThis README describes the package. If you publish this package to pub.dev,\nthis README's contents appear on the landing page for your package.\n\nFor information about how to write a good package README, see the guide for\n[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).\n\nFor general information about developing packages, see the Dart guide for\n[creating packages](https://dart.dev/guides/libraries/create-library-packages)\nand the Flutter guide for\n[developing packages and plugins](https://flutter.dev/developing-packages).\n--\u003e\n\n\u003ch1 align=\"center\"\u003eFloating Bottom Bar\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eA flutter package which allows to show a floating widget which can be used as a tab bar, bottom navigation bar or anything one can think of. The widget reacts to scrolling events too.\u003c/p\u003e\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://flutter.dev\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Platform-Flutter-02569B?logo=flutter\"\n      alt=\"Platform\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://pub.dartlang.org/packages/flutter_floating_bottom_bar\"\u003e\n    \u003cimg src=\"https://img.shields.io/pub/v/flutter-floating-bottom-bar.svg\"\n      alt=\"Pub Package\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/codenameakshay/flutter-floating-bottom-bar?color=red\"\n      alt=\"License: MIT\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.paypal.me/codenameakshay\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Donate-PayPal-00457C?logo=paypal\"\n      alt=\"Donate\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\u003cbr\u003e\n\n| ![A floating tab bar](https://raw.githubusercontent.com/codenameakshay/flutter-floating-bottom-bar/main/screenshots/1.gif) | ![A floating search bar](https://raw.githubusercontent.com/codenameakshay/flutter-floating-bottom-bar/main/screenshots/2.gif) | ![A basic example](https://raw.githubusercontent.com/codenameakshay/flutter-floating-bottom-bar/main/screenshots/3.gif) |\n| -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |\n| **A floating tab bar**                                                                                                     | **A floating search bar**                                                                                                     | **A basic example**                                                                                                     |\n\n| ![image](https://user-images.githubusercontent.com/60510869/183573165-28e6b896-6559-4d86-897a-3bc8b0adb927.png) |\n| --------------------------------------------------------------------------------------------------------------- |\n| **A floating tab bar with a FAB**                                                                               |\n\n## Features\n\nThe package allows you to create a floating widget like a bottom navigation bar that reacts to scrolling events.\n\n- It can be used as a tab bar, bottom navigation bar or anything one can think of.\n- It reacts to scrolling events too.\n- It can be used in a full screen app or in a smaller screen.\n\n## Installing\n\n### 1. Depend on it\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  flutter_floating_bottom_bar: ^1.3.0\n```\n\n### 2. Install it\n\nYou can install packages from the command line:\n\nwith `pub`:\n\n```\npub get\n```\n\nwith `Flutter`:\n\n```\nflutter pub get\n```\n\n### 3. Import it\n\nNow in your `Dart` code, you can use:\n\n```dart\nimport 'package:flutter_floating_bottom_bar/flutter_floating_bottom_bar.dart';\n```\n\n# Usage\n\n`BottomBar` is a _Widget_ that can be wrapped over any child to convert it into a bottom bar.\nBelow is the most simple use:\n\n```dart\n    BottomBar(\n          child: Padding(\n            padding: const EdgeInsets.all(16.0),\n            child: Text(\n              \"This is the floating widget\",\n              textAlign: TextAlign.center,\n              style: TextStyle(color: Colors.white),\n            ),\n          ),\n          body: (context, controller) =\u003e\n              InfiniteListPage(controller: controller, color: Colors.blue,),\n    )\n```\n\nIt needs two required arguments -\n\n- `child` – This is the child inside the `BottomBar` (widget which is floating)\n- `body` – The widget displayed below the `BottomBar` (like your main app)\n\n# Detailed Usage\n\nBelow is the detailed usage of the package, including all properties defined.\n\n```dart\nBottomBar(\n          child: TabBar(), # A floating tab bar\n          fit: StackFit.expand,\n          icon: (width, height) =\u003e Center(\n            child: IconButton(\n              padding: EdgeInsets.zero,\n              onPressed: null,\n              icon: Icon(\n                Icons.arrow_upward_rounded,\n                color: unselectedColor,\n                size: width,\n              ),\n            ),\n          ),\n          borderRadius: BorderRadius.circular(500),\n          duration: Duration(seconds: 1),\n          curve: Curves.decelerate,\n          showIcon: true,\n          width: MediaQuery.of(context).size.width * 0.8,\n          barColor: colors[currentPage].computeLuminance() \u003e 0.5 ? Colors.black : Colors.white,\n          start: 2,\n          end: 0,\n          offset: 10,\n          barAlignment: Alignment.bottomCenter,\n          iconHeight: 35,\n          iconWidth: 35,\n          reverse: false,\n          barDecoration: BoxDecoration(\n            color: colors[currentPage],\n            borderRadius: BorderRadius.circular(500),\n          ),\n          iconDecoration: BoxDecoration(\n            color: colors[currentPage],\n            borderRadius: BorderRadius.circular(500),\n          ),\n          hideOnScroll: true,\n          scrollOpposite: false,\n          onBottomBarHidden: () {},\n          onBottomBarShown: () {},\n          body: (context, controller) =\u003e TabBarView(\n            controller: tabController,\n            dragStartBehavior: DragStartBehavior.down,\n            physics: const BouncingScrollPhysics(),\n            children: [] # Add children here\n          ),\n        )\n```\n\n## icon\n\n```dart\n    icon: Center(\n            child: IconButton(\n              padding: EdgeInsets.zero,\n              onPressed: null,\n              icon: Icon(\n                Icons.arrow_upward_rounded,\n                color: unselectedColor,\n              ),\n            ),\n          ),\n```\n\nThis is the scroll to top button. It will be hidden when the `BottomBar` is scrolled up. It will be shown when the `BottomBar` is scrolled down. Clicking it will scroll the bar on top.\n\nYou can hide this by using the `showIcon` property.\n\n## iconWidth\n\n```dart\n    iconWidth: 35,\n```\n\nThe width of the scroll to top button.\n\n## iconHeight\n\n```dart\n    iconHeight: 35,\n```\n\nThe height of the scroll to top button.\n\n## barColor\n\n```dart\n     barColor: Colors.white,\n```\n\nThe color of the `BottomBar`.\n\n## end\n\n```dart\n     end: 0,\n```\n\nThe end position in `y-axis` of the SlideTransition of the `BottomBar`.\n\n## start\n\n```dart\n     start: 2,\n```\n\nThe start position in `y-axis` of the SlideTransition of the `BottomBar`.\n\n## offset\n\n```dart\n     offset: 10,\n```\n\nThe padding/offset from all sides of the bar in double.\n\n## duration\n\n```dart\n     duration: Duration(seconds: 1),\n```\n\nThe duration of the `SlideTransition` of the `BottomBar`.\n\n## curve\n\n```dart\n     curve: Curves.decelerate,\n```\n\nThe curve of the `SlideTransition` of the `BottomBar`.\n\n## width\n\n```dart\n     width: MediaQuery.of(context).size.width * 0.8,\n```\n\nThe width of the `BottomBar`.\n\n## borderRadius\n\n```dart\n     borderRadius: BorderRadius.circular(500),\n```\n\nThe border radius of the `BottomBar`.\n\n## showIcon\n\n```dart\n     showIcon: true,\n```\n\nIf you don't want the scroll to top button to be visible, set this to `false`.\n\n## barAlignment\n\n```dart\n     barAlignment: Alignment.bottomCenter,\n```\n\nThe alignment of the Bar and the icon in the Stack in which the `BottomBar` is placed.\n\n## onBottomBarShown\n\n```dart\n     onBottomBarShown: () {},\n```\n\nThe callback when the `BottomBar` is shown i.e. on response to scroll events.\n\n## onBottomBarHidden\n\n```dart\n     onBottomBarHidden: () {},\n```\n\nThe callback when the `BottomBar` is hidden i.e. on response to scroll events.\n\n## reverse\n\n```dart\n     reverse: true,\n```\n\nTo reverse the direction in which the scroll reacts, i.e. if you want to make the bar visible when you scroll down and hide it when you scroll up, set this to `true`.\n\n## scrollOpposite\n\n```dart\n     scrollOpposite: true,\n```\n\nTo reverse the direction in which the scroll to top button scrolls, i.e. if you want to scroll to bottom, set this to `true`.\n\n## hideOnScroll\n\n```dart\n     hideOnScroll: false,\n```\n\nIf you don't want the bar to be hidden ever, set this to `false`.\n\n## fit\n\n```dart\n     fit: StackFit.expand,\n```\n\nThe fit property of the `Stack` in which the `BottomBar` is placed.\n\n## clip\n\n```dart\n     clip: Clip.none,\n```\n\nThe clipBehaviour property of the `Stack` in which the `BottomBar` is placed.\n\n## respectSafeArea\n\n```dart\n     respectSafeArea: false,\n```\n\nWhether the BottomBar should respect the SafeArea. If set to false, the BottomBar will extend into the system UI areas (like the bottom navigation area on iOS). This gives you more layout flexibility when you need the BottomBar to overlap with system UI elements.\n\n## barDecoration\n\n```dart\n     barDecoration: BoxDecoration(\n            color: Colors.red,\n            borderRadius: BorderRadius.circular(500),\n          ),\n```\n\nThe BoxDecoration for the `BottomBar`.\n\n## iconDecoration\n\n```dart\n     iconDecoration: BoxDecoration(\n            color: Colors.white,\n            borderRadius: BorderRadius.circular(500),\n          ),\n```\n\nThe BoxDecoration for the scroll to top icon shown when `BottomBar` is hidden.\n\n\u003e Note - You can find more detailed examples in the `example` directory.\n\n# Bugs or Requests\n\nIf you encounter any problems feel free to open an [issue](https://github.com/codenameakshay/flutter-floating-bottom-bar/issues/new?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https://github.com/codenameakshay/flutter-floating-bottom-bar/issues/new?template=feature_request.md) on GitHub and I'll look into it. Pull request are also welcome.\n\nSee [Contributing.md](https://github.com/codenameakshay/flutter-floating-bottom-bar/blob/master/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodenameakshay%2Fflutter-floating-bottom-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodenameakshay%2Fflutter-floating-bottom-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodenameakshay%2Fflutter-floating-bottom-bar/lists"}