{"id":18002145,"url":"https://github.com/coderuni/bottom_bar","last_synced_at":"2025-03-26T08:31:08.978Z","repository":{"id":56826689,"uuid":"359076035","full_name":"CoderUni/bottom_bar","owner":"CoderUni","description":"Bottom bar helps create an optimized bottom navigation bar with beautiful animations","archived":false,"fork":false,"pushed_at":"2022-11-26T07:48:16.000Z","size":649,"stargazers_count":15,"open_issues_count":2,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T11:52:31.483Z","etag":null,"topics":["bottombar","bottomnavigationbar","flutter","hacktoberfest"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/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/CoderUni.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}},"created_at":"2021-04-18T07:35:13.000Z","updated_at":"2024-09-13T10:52:13.000Z","dependencies_parsed_at":"2022-09-20T22:54:40.822Z","dependency_job_id":null,"html_url":"https://github.com/CoderUni/bottom_bar","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/CoderUni%2Fbottom_bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fbottom_bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fbottom_bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fbottom_bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CoderUni","download_url":"https://codeload.github.com/CoderUni/bottom_bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245618694,"owners_count":20645048,"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":["bottombar","bottomnavigationbar","flutter","hacktoberfest"],"created_at":"2024-10-29T23:20:10.770Z","updated_at":"2025-03-26T08:31:08.359Z","avatar_url":"https://github.com/CoderUni.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bottom Bar\n\nBottom bar helps create an optimized bottom navigation bar with beautiful animations.\n\n![Bottom Bar](https://raw.githubusercontent.com/CoderUni/bottom_bar/main/assets/preview.gif)\n\n# Content\n\n- [Installation](#installation)\n- [Parameters](#parameters)\n- [Take Note](#take-note)\n- [FAQ](#faq)\n- [Community Support](#community-support)\n\n# Installation\nAdd `bottom_bar` to pubspec.yaml\n```yaml\ndependencies:\n  bottom_bar: ^2.0.3\n```\n\n# Breaking Changes\n- `darkActiveColor` is removed to simplify the api. Instead, use [PlatformBrightness](https://stackoverflow.com/a/56307575) to check dark mode and adjust the color accordingly\n\n# Parameters\n\n## BottomBar\n#### Creates a `BottomBar` that displays a list of [BottomBarItem](#BottomBarItem)\n\n### Required:\n-  selectedIndex - Index of selected item\n-  items - List of [BottomBarItem](#BottomBarItem) to display\n-  onTap - Fires when a [BottomBarItem](#BottomBarItem) is tapped\n\n### Optional:\n-  backgroundColor - Background Color of `BottomBar`\n-  height - Height of `BottomBar`\n-  padding - Padding of `BottomBar` container\n-  mainAxisAlignment - Describes how [BottomBarItems](#BottomBarItem) are horizontally laid out\n-  curve - `Curve` of animation\n-  duration - `Duration` of animation\n-  border - Border of [BottomBarItem](#BottomBarItem)'s background color\n-  itemPadding - `Padding` of [BottomBarItem](#BottomBarItem)'s background color\n-  textStyle - `TextStyle` of title widget\n-  showActiveBackgroundColor - Shows the background color of a selected [BottomBarItem](#BottomBarItem) if set to true\n\n \n## BottomBarItem\n#### Contains information about the item that [BottomBar](#BottomBar) has to display\n\n### Required:\n-  icon - `Icon` of `BottomBarItem`\n-  title - Title of `BottomBarItem` (Typically a Text widget)\n-  activeColor - Primary color of a selected `BottomBarItem`\n\n### Optional:\n-  activeIconColor - Icon color of a selected `BottomBarItem`\n-  activeTitleColor - Text color of a selected `BottomBarItem`\n-  backgroundColorOpacity - Opacity of a selected `BottomBarItem` background color (Defaults to 15%)\n-  inactiveIcon- Icon to display when `BottomBarItem` is not active\n-  inactiveColor - Primary color of `BottomBarItem` when it is **NOT** selected\n\n# Usage\n\n## Import the Package\n```dart\nimport 'package:bottom_bar/bottom_bar.dart';\n```\n\n## Example\n```dart\n  int _currentPage = 0;\n  final _pageController = PageController();\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: PageView(\n        controller: _pageController,\n        children: [\n          Container(color: Colors.blue),\n          Container(color: Colors.red),\n          Container(color: Colors.greenAccent.shade700),\n          Container(color: Colors.orange),\n        ],\n        onPageChanged: (index) {\n          // Use a better state management solution\n          // setState is used for simplicity\n          setState(() =\u003e _currentPage = index);\n        },\n      ),\n      bottomNavigationBar: BottomBar(\n        selectedIndex: _currentPage,\n        onTap: (int index) {\n          _pageController.jumpToPage(index);\n          setState(() =\u003e _currentPage = index);\n        },\n        items: \u003cBottomBarItem\u003e[\n          BottomBarItem(\n            icon: Icon(Icons.home),\n            title: Text('Home'),\n            activeColor: Colors.blue,\n          ),\n          BottomBarItem(\n            icon: Icon(Icons.favorite),\n            title: Text('Favorites'),\n            activeColor: Colors.red,\n          ),\n          BottomBarItem(\n            icon: Icon(Icons.person),\n            title: Text('Account'),\n            activeColor: Colors.greenAccent.shade700,\n          ),\n          BottomBarItem(\n            icon: Icon(Icons.settings),\n            title: Text('Settings'),\n            activeColor: Colors.orange,\n          ),\n        ],\n      ),\n    );\n  }\n```\n\n# FAQ\n### My phone's notch is overlapping with BottomBar. How do I fix this?\n- Simply wrap BottomBar with a SafeArea widget.\n\n### How do I change the overall color of BottomBarItem when in dark mode?\n- You can use [PlatformBrightness](https://stackoverflow.com/a/56307575) to check dark mode and adjust the color accordingly.\n```dart\n  @override\n  Widget build(BuildContext context) {\n    bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;\n\n    BottomBarItem(\n      activeColor: isDarkMode ? Colors.orange : Colors.blue, // Is dark mode true? (Yes -\u003e Colors.orange | No -\u003e Colors.blue)\n    ),\n  }\n```\n\n# Community Support\n\nIf you have any suggestions or issues, feel free to open an [issue](https://github.com/CoderUni/bottom_bar/issues)\n\nIf you would like to contribute, feel free to create a [PR](https://github.com/CoderUni/bottom_bar/pulls)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderuni%2Fbottom_bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderuni%2Fbottom_bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderuni%2Fbottom_bar/lists"}