{"id":13549268,"url":"https://github.com/Mindinventory/animated_notch_bottom_bar","last_synced_at":"2025-04-02T22:31:36.771Z","repository":{"id":59920386,"uuid":"536499704","full_name":"Mindinventory/animated_notch_bottom_bar","owner":"Mindinventory","description":"Tabbar component for Flutter","archived":false,"fork":false,"pushed_at":"2024-09-16T12:14:57.000Z","size":309,"stargazers_count":119,"open_issues_count":1,"forks_count":36,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-02T08:09:01.335Z","etag":null,"topics":["animatedtabbar","flutter","tabbar","tabbar-notch"],"latest_commit_sha":null,"homepage":"","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/Mindinventory.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2022-09-14T09:14:22.000Z","updated_at":"2025-03-27T23:49:20.000Z","dependencies_parsed_at":"2023-12-20T13:09:32.914Z","dependency_job_id":"91616d36-eb57-49b6-a75c-fa0201bc6e21","html_url":"https://github.com/Mindinventory/animated_notch_bottom_bar","commit_stats":{"total_commits":41,"total_committers":3,"mean_commits":"13.666666666666666","dds":"0.24390243902439024","last_synced_commit":"d4cc9b76ad4704fd5b3e506657f3e6936228adde"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Fanimated_notch_bottom_bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Fanimated_notch_bottom_bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Fanimated_notch_bottom_bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Fanimated_notch_bottom_bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mindinventory","download_url":"https://codeload.github.com/Mindinventory/animated_notch_bottom_bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246777832,"owners_count":20832032,"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":["animatedtabbar","flutter","tabbar","tabbar-notch"],"created_at":"2024-08-01T12:01:20.083Z","updated_at":"2025-04-02T22:31:35.664Z","avatar_url":"https://github.com/Mindinventory.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Animated Notch Bottom Bar\n\u003ca href=\"https://pub.dev/packages/animated_notch_bottom_bar\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/animated_notch_bottom_bar.svg?label=animated_notch_bottom_bar\" alt=\"animated_notch_bottom_bar version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://flutter.dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/flutter-website-deepskyblue.svg\" alt=\"Flutter Website\"\u003e\u003c/a\u003e\n\u003ca href=\"https://dart.dev\"\u003e\u003cimg src=\"https://img.shields.io/badge/dart-website-deepskyblue.svg\" alt=\"Dart Website\"\u003e\u003c/a\u003e\n\u003ca href=\"https://developer.android.com\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-android-blue\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://developer.apple.com/ios/\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-iOS-blue\"\u003e\n\u003c/a\u003e\n\u003ca href=\"\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-Web-deepskyblue\"\u003e\n\u003c/a\u003e\n\u003ca href=\"\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-Mac-deepskyblue\"\u003e\n\u003c/a\u003e\n\u003ca href=\"\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-Linux-deepskyblue\"\u003e\n\u003c/a\u003e\n\u003ca href=\"\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-Windows-deepskyblue\"\u003e\n\u003c/a\u003e\n\u003ca href=\"\"\u003e\u003cimg src=\"https://app.codacy.com/project/badge/Grade/dc683c9cc61b499fa7cdbf54e4d9ff35\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Mindinventory/animated_notch_bottom_bar/blob/main/LICENSE\" style=\"pointer-events: stroke;\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/license/Mindinventory/animated_notch_bottom_bar\"\u003e\u003c/a\u003e\n\u003ca href=\"https://pub.dev/packages/animated_notch_bottom_bar\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/Mindinventory/animated_notch_bottom_bar\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/Mindinventory/animated_notch_bottom_bar?style=social\" alt=\"MIT License\"\u003e\u003c/a\u003e\n\nA Flutter package for animating the position of selected item in bottomNavigationBar with notch like design. Inspired by [react-native-tabbar-interaction](https://github.com/Mindinventory/react-native-tabbar-interaction) plugin.\n\n## Features :\n* Supports any widget as as a bottom bar children.\n* Animates the notch toward selected item.\n* Create an optimized bottom navigation bar with beautiful animation.\n* Supports blur effect like iOS Tab View.\n\n\u003cimg src=\"https://cdn.dribbble.com/users/1233499/screenshots/4844696/preview.gif\" \u003e \n\n## Getting Started\n\nAdd the dependency in `pubspec.yaml`:\n\n```yaml\ndependencies:\n  ...\n  animated_notch_bottom_bar: ^1.0.0\n```\n## Basic Usage\n\nPlace `AnimatedNotchBottomBar` in the bottomNavigationBar parameter of a `Scaffold` widget and provide `NotchBottomBarController` to `AnimatedNotchBottomBar`.\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n  notchBottomBarController: _controller,\n  ...\n)\n```\n\n##### Use any `Widget` as bottom bar item\n\nYou can also set any animated widget.\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n  pageController: _pageController,\n  bottomBarItems: [\n    const BottomBarItem(\n        inActiveItem: Icon(\n           Icons.home_filled,\n            color: Colors.blueGrey,\n        ),\n        activeItem: Icon(\n          Icons.home_filled,\n          color: Colors.blueAccent,\n        ),\n        itemLabel: 'Page 1',\n  ),\n    const BottomBarItem(\n        inActiveItem: Icon(\n            Icons.star,\n            color: Colors.blueGrey,\n          ),\n        activeItem: Icon(\n            Icons.star,\n            color: Colors.blueAccent,\n        ),\n        itemLabel: 'Page 2',\n  ),\n\n     ///svg item\n    BottomBarItem(\n        inActiveItem: SvgPicture.asset(\n          'assets/search_icon.svg',\n           color: Colors.blueGrey,\n       ),\n       activeItem: SvgPicture.asset(\n          'assets/search_icon.svg',\n           color: Colors.black,\n       ),\n       itemLabel: 'Page 3',\n    ),\n     ...\n)\n```\n##### Remove margins\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     removeMargins: true,     \n     ...\n)\n```\n\n##### Set bottom bar width and height\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     bottomBarWidth: 500.0,     \n     bottomBarHeight: 62.0,     \n     ...\n)\n```\n\n##### Add animation duration\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     durationInMilliSeconds: 300,     \n     ...\n)\n```\n\n##### Show/hide item label and style\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     showLabel: true,\n     itemLabelStyle: TextStyle(\n                      color: Colors.black,\n                      fontSize: 16.0\n                    ),\n     ...\n)\n```\n\n##### Set Notch's color\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n      notchColor: Colors.black87,     \n     ...\n)\n```\n\n##### Set Notch's gradient\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     notchGradient: const LinearGradient(\n        begin: Alignment.topRight,\n        end: Alignment.bottomLeft,\n        colors: [\n          Colors.red,\n          Colors.green,\n        ],\n     ),     \n     ...\n)\n```\n\n##### Hide top and bottom corner radius\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     showBottomRadius = false,\n     showTopRadius = false,\n     ...\n)\n```\n\n##### Customize elevation\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n     ...\n     elevation = 2.0,\n     ...\n)\n```\n\n##### Customized Blur Effect (iOS Tab View)\n\n```dart\nbottomNavigationBar:  AnimatedNotchBottomBar(\n    ...\n    showBlurBottomBar: true,\n    blurOpacity: 0.2,\n    blurFilterX: 5.0,\n    blurFilterY: 10.0,\n    ...\n)\n```\n\n### Migrating to 1.0.0+\n\nStarting with version `1.0.0` of the package, `NotchBottomBarController` have been added for control the animation instead of `PageController`. The `pageController` field has been removed and `notchBottomBarController` is required now.\n\n### AnimatedNotchBottomBar\n- `notchBottomBarController` - The controller which allows you to control the page.\n- `bottomBarItems` - Navigation items, required more than one item and less than six.\n- `onTap` - Required to listen when an item is tapped it provides the selected item's index.\n- `color` - The bottom bar's background color.\n- `removeMargins` - To remove side and bottom margins by default it's false.\n- `bottomBarWidth` - To provide width for web and desktop app.\n- `durationInMilliSeconds` - To set duration time in MilliSeconds.\n- `showLabel`: To show or hide the label under bottom bar item.\n- `itemLabelStyle` - The bottom bar's item text style.\n- `showShadow` - If false the bottom bar's elevation will be removed.\n- `showBlurBottomBar` - If true the bottom bar will look blur.\n- `blurOpacity` - To set opacity of blur effect.\n- `blurFilterX` - Creates an image filter that applies a Gaussian blur at x axis.\n- `blurFilterY` - Creates an image filter that applies a Gaussian blur at y axis.\n- `notchColor` - Customizable notch's color.\n- `notchGradient` - Add Gradient to notch.\n- `showTopRadius` - If set false the top corner radius will be removed.\n- `showBottomRadius` - If set false the top corner radius will be removed.\n- `elevation` - Set elevation of bottom bar.\n- `bottomBarHeight` - To set height of bottom bar.\n\n### BottomBarItems\n- `title` - the bottom bar item label\n- `activeItem` - the selected item.\n- `inActiveItem` - the inactive item.\n\n## Guideline for contributors\nContribution towards our repository is always welcome, we request contributors to create a pull request to the main branch only.\n\n# LICENSE!\nAnimated Notch Bottom Bar is [MIT-licensed](https://github.com/Mindinventory/animated_notch_bottom_bar/blob/main/LICENSE \"MIT-licensed\").\n\n# Let us know!\nWe’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com and do let us know if you have any questions or suggestion regarding our work.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMindinventory%2Fanimated_notch_bottom_bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMindinventory%2Fanimated_notch_bottom_bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMindinventory%2Fanimated_notch_bottom_bar/lists"}