Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sooxt98/google_nav_bar
A modern google style nav bar for flutter.
https://github.com/sooxt98/google_nav_bar
bottombar bottomnavigationbar bubble-navigation flutter flutter-apps flutter-material flutter-package flutter-plugin flutter-widget google-nav navigationbar
Last synced: 3 months ago
JSON representation
A modern google style nav bar for flutter.
- Host: GitHub
- URL: https://github.com/sooxt98/google_nav_bar
- Owner: sooxt98
- License: mit
- Created: 2019-12-22T06:56:56.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-13T17:26:30.000Z (over 1 year ago)
- Last Synced: 2024-06-18T18:31:12.904Z (7 months ago)
- Topics: bottombar, bottomnavigationbar, bubble-navigation, flutter, flutter-apps, flutter-material, flutter-package, flutter-plugin, flutter-widget, google-nav, navigationbar
- Language: Dart
- Homepage:
- Size: 183 KB
- Stars: 706
- Watchers: 7
- Forks: 108
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Google Nav Bar - 一款现代化的 Google 风格导航栏，由 [Sooxt98](http://github.com/sooxt98) 创建。 (组件 / UI)
- awesome-flutter - Google Nav Bar - A modern google style nav bar for flutter. ` 📝 2 months ago` (UI [🔝](#readme))
- awesome-flutter - Google Nav Bar - A modern google style nav bar for flutter by [Sooxt98](http://github.com/sooxt98) (Components / UI)
- awesome-flutter-cn - Google Nav Bar - 一个 google 风格的现代导航栏，[Sooxt98](http://github.com/sooxt98). (组件 / UI)
README
# google_nav_bar
A modern google style nav bar for flutter.
GoogleNavBar is a Flutter widget designed by [Aurelien Salomon](https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern/) and developed by [sooxt98](https://www.instagram.com/sooxt98/).
## Getting Started
Add this to your package's `pubspec.yaml` file:
```
...
dependencies:
google_nav_bar: ^5.0.7
```
Now in your Dart code, you can use:
```
import 'package:google_nav_bar/google_nav_bar.dart';
```
## Usage
Style your tab globally with GNav's attribute, if you wish to style tab separately, use GButton's attribute
``` dart
GNav(
rippleColor: Colors.grey[800], // tab button ripple color when pressed
hoverColor: Colors.grey[700], // tab button hover color
haptic: true, // haptic feedback
tabBorderRadius: 15,
tabActiveBorder: Border.all(color: Colors.black, width: 1), // tab button border
tabBorder: Border.all(color: Colors.grey, width: 1), // tab button border
tabShadow: [BoxShadow(color: Colors.grey.withOpacity(0.5), blurRadius: 8)], // tab button shadow
curve: Curves.easeOutExpo, // tab animation curves
duration: Duration(milliseconds: 900), // tab animation duration
gap: 8, // the tab button gap between icon and text
color: Colors.grey[800], // unselected icon color
activeColor: Colors.purple, // selected icon and text color
iconSize: 24, // tab button icon size
tabBackgroundColor: Colors.purple.withOpacity(0.1), // selected tab background color
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5), // navigation bar padding
tabs: [
GButton(
icon: LineIcons.home,
text: 'Home',
),
GButton(
icon: LineIcons.heart_o,
text: 'Likes',
),
GButton(
icon: LineIcons.search,
text: 'Search',
),
GButton(
icon: LineIcons.user,
text: 'Profile',
)
]
)
```
View the example folder
There are 4 different use case included in the /example directory, go try it out!