{"id":13549145,"url":"https://github.com/MarsadMaqsood/stylish_bottom_bar","last_synced_at":"2025-04-02T22:31:29.350Z","repository":{"id":56840756,"uuid":"402977560","full_name":"MarsadMaqsood/stylish_bottom_bar","owner":"MarsadMaqsood","description":"A stylish bottom navigation bar for flutter.","archived":false,"fork":false,"pushed_at":"2025-03-23T18:31:21.000Z","size":8436,"stargazers_count":36,"open_issues_count":0,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-23T19:27:38.020Z","etag":null,"topics":["android","animated-bottom-tabs","animated-navigation","bottom-bar","bottom-navigation","bubble-navigation","dart","flutter","flutter-bottom-navigation","flutter-package","ios","stylish-bottom-bar"],"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/MarsadMaqsood.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":"2021-09-04T06:00:46.000Z","updated_at":"2025-03-23T18:28:21.000Z","dependencies_parsed_at":"2023-11-09T11:48:56.064Z","dependency_job_id":"c10deb33-f276-4966-8123-2a46cf71de62","html_url":"https://github.com/MarsadMaqsood/stylish_bottom_bar","commit_stats":{"total_commits":71,"total_committers":2,"mean_commits":35.5,"dds":"0.014084507042253502","last_synced_commit":"00b75bcd5ad2a0e705b3fade98485ef87918c87e"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarsadMaqsood%2Fstylish_bottom_bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarsadMaqsood%2Fstylish_bottom_bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarsadMaqsood%2Fstylish_bottom_bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarsadMaqsood%2Fstylish_bottom_bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarsadMaqsood","download_url":"https://codeload.github.com/MarsadMaqsood/stylish_bottom_bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246905105,"owners_count":20852812,"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":["android","animated-bottom-tabs","animated-navigation","bottom-bar","bottom-navigation","bubble-navigation","dart","flutter","flutter-bottom-navigation","flutter-package","ios","stylish-bottom-bar"],"created_at":"2024-08-01T12:01:18.747Z","updated_at":"2025-04-02T22:31:29.332Z","avatar_url":"https://github.com/MarsadMaqsood.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"[![Hello](https://img.shields.io/badge/Hello-Sweet%20World-teal)](https://github.com/MarsadMaqsood) [![stylish_bottom_bar](https://img.shields.io/badge/Flutter-Stylish%20Bottom%20Bar-blueviolet)](https://pub.dev/packages/stylish_bottom_bar) [![Version](https://img.shields.io/pub/v/stylish_bottom_bar?color=%2354C92F\u0026logo=dart)](https://pub.dev/packages/stylish_bottom_bar/install)\n\n\nA collection of stylish bottom navigation bars like animated bottom bar and bubble bottom bar for flutter.\n\n\n## Table of contents\n- [Installing](#installing)\n- [How To Use](#how_to_use)\n- [Showcase](#showcase)\n- [Migrate to 1.0.0](#migrate)\n- [Example](#example)\n\n## ⭐  Installing \u003ca name=\"installing\"\u003e\u003c/a\u003e\n\n    dependencies:\n        stylish_bottom_bar: ^1.1.1\n\n## ⚡ Import\n\n```dart\nimport 'package:stylish_bottom_bar/stylish_bottom_bar.dart';\n```\n\n## 📙 How To Use \u003ca name=\"how_to_use\"\u003e\u003c/a\u003e\n```dart\nitems:\noption:\nbackgroundColor:\nelevation:\ncurrentIndex:\niconSize:\npadding:\ninkEffect:\ninkColor:\nonTap:\nopacity:\nborderRadius:\nfabLocation:\nhasNotch:\nbarAnimation:\nbarStyle:\nunselectedIconColor:\nbubbleFillStyle:\niconStyle:\nselectedIcon:\ndotStyle:\n```\n\n## Properties\n\n```dart\nitems → List\u003cBottomBarItem\u003e\noption → AnimatedBarOptions\noption → BubbleBarOptions\noption → DotBarOptions\nbackgroundColor → Color\nelevation → double\ncurrentIndex → int\niconSize → double\npadding → EdgeInsets\ninkEffect → bool\ninkColor → Color\nonTap → Function(int)\nopacity → double\nborderRadius → BorderRadius\nfabLocation → StylishBarFabLocation\nhasNotch → bool\nbarAnimation → BarAnimation\nbarStyle → BubbleBarStyle\nunselectedIconColor → Color\nbubbleFillStyle → BubbleFillStyle\niconStyle → IconStyle\ndotStyle → DotStyle\n```\n\n### BarStyle\n```dart\nBubbleBarStyle.vertical\nBubbleBarStyle.horizotnal\n```\n\n### BubbleFillStyle\n```dart\nBubbleFillStyle.fill\nBubbleFillStyle.outlined\n```\n\n### FabLocation\n```dart\nStylishBarFabLocation.center\nStylishBarFabLocation.end\n```\n\n### BarAnimation\n```dart\nBarAnimation.fade\nBarAnimation.blink\nBarAnimation.transform3D\nBarAnimation.liquid\nBarAnimation.drop\n```\n\n### IconStyle\n```dart\nIconStyle.Default\nIconStyle.simple\nIconStyle.animated\n```\n\n### DotStyle\n```dart\nDotStyle.circle\nDotStyle.tile\n```\n\n### NotchStyle\n```dart\nNotchStyle.circle\nNotchStyle.square\nNotchStyle.themeDefault\n```\n\n\n\n### Event\n```dart\nonTap: (index){\n    \n}\n```\n\n## Showcase \u003ca name=\"showcase\"\u003e\u003c/a\u003e\n\n**AnimatedNavigationBar**\n\n`IconStyle.Default`\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/29.gif\"\u003e\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/27.gif\"\u003e\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/28.gif\"\u003e\n\n---\n\n`IconStyle.simple`\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/25.gif\"\u003e\n\n---\n\n`IconStyle.animated`\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/21.gif\"\u003e\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/20.gif\"\u003e\n\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/26.gif\"\u003e\n\n---\n\n`BarAnimation.fade`\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/9.gif?raw=true\"\u003e\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/10.gif?raw=true\"\u003e\n\n---\n\n`BarAnimation.blink`\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/11.gif?raw=true\"\u003e\n\n---\n`BarAnimation.liquid`\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/23.gif\"\u003e\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/24.gif\"\u003e\n\n---\n\n`BarAnimation.drop`\n\n\u003cimg width=\"356\" height=\"70\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/1.gif\"\u003e\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/2.gif\"\u003e\n\n\u003cimg width=\"356\" height=\"100\" src=\"https://raw.githubusercontent.com/MarsadMaqsood/stylish_bottom_bar/master/showcase/3.gif\"\u003e\n\n\n---\n\n**DotNavigationBar**\n\n`DotStyle.circle`\n\n\u003cimg width=\"356\" height=\"70\" src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/30.gif?raw=true\"\u003e\n\u003cimg width=\"356\" height=\"70\" src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/31.gif?raw=true\"\u003e\n\n---\n\n`DotStyle.tile`\n\n\u003cimg width=\"356\" height=\"70\" src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/32.gif?raw=true\"\u003e\n\u003cimg width=\"356\" height=\"70\" src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/33.gif?raw=true\"\u003e\n\n\n**BubbleNavigationBar**\n\n`BubbleBarStyle.horizotnal`\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/6.gif?raw=true\"\u003e\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/7.gif?raw=true\"\u003e\n\n`BubbleFillStyle.outlined`\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/14.gif?raw=true\"\u003e\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/15.gif?raw=true\"\u003e\n\n\n`BubbleBarStyle.vertical`\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/4.gif?raw=true\"\u003e\n\n\n`BubbleFillStyle.outlined`\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/12.gif?raw=true\"\u003e\n\n\u003cimg src=\"https://github.com/MarsadMaqsood/stylish_bottom_bar/raw/master/showcase/13.gif?raw=true\"\u003e\n\n## Migrate to 1.0.0 \u003ca name=\"migrate\"\u003e\u003c/a\u003e\n\n`List\u003cdynamic\u003e items` is changed to `List\u003cBottomBarItem\u003e items`\n\nFrom version **1.0.0** `option:` `AnimatedBarOptions` and `BubbleBarOptions` will be used to change the bar items type and properties.\n\n## Example \u003ca name=\"example\"\u003e\u003c/a\u003e\n\n```dart\nStylishBottomBar(\n//  option: AnimatedBarOptions(\n//    iconSize: 32,\n//    barAnimation: BarAnimation.liquid,\n//    iconStyle: IconStyle.animated,\n//    opacity: 0.3,\n//  ),\n//  option: BubbleBarOptions(\n//    barStyle: BubbleBarStyle.horizotnal,\n//    // barStyle: BubbleBarStyle.vertical,\n//    bubbleFillStyle: BubbleFillStyle.fill,\n//    // bubbleFillStyle: BubbleFillStyle.outlined,\n//    opacity: 0.3,\n//  ),\n  option: DotBarOptions(\n    dotStyle: DotStyle.tile,\n    gradient: const LinearGradient(\n      colors: [\n        Colors.deepPurple,\n        Colors.pink,\n      ],\n      begin: Alignment.topLeft,\n      end: Alignment.bottomRight,\n    ),\n  ),\n  items: [\n    BottomBarItem(\n      icon: const Icon(Icons.abc),\n      title: const Text('Abc'),\n      backgroundColor: Colors.red,\n      selectedIcon: const Icon(Icons.read_more),\n    ),\n    BottomBarItem(\n      icon: const Icon(Icons.safety_divider),\n      title: const Text('Safety'),\n      backgroundColor: Colors.orange,\n    ),\n    BottomBarItem(\n      icon: const Icon(Icons.cabin),\n      title: const Text('Cabin'),\n      backgroundColor: Colors.purple,\n    ),\n  ],\n  fabLocation: StylishBarFabLocation.end,\n  hasNotch: true,\n  currentIndex: selected,\n  onTap: (index) {\n    setState(() {\n      selected = index;\n      controller.jumpToPage(index);\n    });\n  },\n)\n\n```\n\n\nContributions and pull requests are welcome! We value your input and appreciate any improvements or suggestions you can provide. Feel free to submit a pull request with your changes. Don't forget to star the repository if you find it useful. Thank you for your collaboration!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarsadMaqsood%2Fstylish_bottom_bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMarsadMaqsood%2Fstylish_bottom_bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMarsadMaqsood%2Fstylish_bottom_bar/lists"}