All Projects → sooxt98 → Google_nav_bar

sooxt98 / Google_nav_bar

Licence: mit
A modern google style nav bar for flutter.

Programming Languages

dart
5743 projects

Projects that are alternatives of or similar to Google nav bar

flutter-app
Full Feature Todos Flutter Mobile app with fireStore integration.
Stars: ✭ 138 (-52.41%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter i18n
This plugin create a binding between your translations from .arb files and your Flutter app.
Stars: ✭ 255 (-12.07%)
Mutual labels:  flutter-apps, flutter-plugin
Motion-Tab-Bar
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.
Stars: ✭ 237 (-18.28%)
Mutual labels:  flutter-plugin, flutter-apps
flutter bolg manage
Flutter实战项目,采用Getx框架管理,遵循Material design设计风格,适合您实战参考或练手
Stars: ✭ 373 (+28.62%)
Mutual labels:  flutter-plugin, flutter-apps
Qrcode scanner
🛠 Flutter QR code scanner plugin.
Stars: ✭ 274 (-5.52%)
Mutual labels:  flutter-apps, flutter-plugin
getx-snippets-intelliJ
An extension to accelerate the process of developing applications with flutter, aimed at everyone using the GetX package.
Stars: ✭ 52 (-82.07%)
Mutual labels:  flutter-plugin, flutter-apps
swipedetector
A Flutter package to detect up, down, left, right swipes.
Stars: ✭ 34 (-88.28%)
Mutual labels:  flutter-plugin, flutter-apps
Math Metrix
This is Math-Puzzle game made in flutter and available on Playstore & AppStore
Stars: ✭ 48 (-83.45%)
Mutual labels:  flutter-apps, flutter-plugin
flutter-tunein
Dynamically themed Music Player built with flutter
Stars: ✭ 108 (-62.76%)
Mutual labels:  flutter-plugin, flutter-apps
nepali date picker
Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support. Supports both Android and ios.
Stars: ✭ 30 (-89.66%)
Mutual labels:  flutter-plugin, flutter-apps
Flutterexampleapps
[Example APPS] Basic Flutter apps, for flutter devs.
Stars: ✭ 15,950 (+5400%)
Mutual labels:  flutter-apps, flutter-plugin
A-Complete-Guide-To-Flutter
This repo contains all the small snippets related to Flutter Apps. Most of the projects/apps are deployed on Flutter Web using GitHub Actions CI Pipeline.
Stars: ✭ 70 (-75.86%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter Credit Card Input Form
Flutter Credit Card Input form
Stars: ✭ 201 (-30.69%)
Mutual labels:  flutter-apps, flutter-plugin
getwidget-docs
Get Widgets UI library docs.
Stars: ✭ 17 (-94.14%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter Apps Collection
This is a repository of a collection of apps made in flutter
Stars: ✭ 98 (-66.21%)
Mutual labels:  flutter-apps, flutter-plugin
liquid button
Liquify your buttons, web demo at website
Stars: ✭ 18 (-93.79%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter Cinema
Learn to create flutter app with BLoC Architecture
Stars: ✭ 26 (-91.03%)
Mutual labels:  flutter-apps, flutter-plugin
Awesome Flutter
An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.
Stars: ✭ 38,582 (+13204.14%)
Mutual labels:  flutter-apps, flutter-plugin
Web Vuw
A Web View for flutter
Stars: ✭ 40 (-86.21%)
Mutual labels:  flutter-plugin, flutter-apps
Flutter-Apps
🌀 This is mainly focus on a complete application for production
Stars: ✭ 18 (-93.79%)
Mutual labels:  flutter-plugin, flutter-apps

google_nav_bar

    

A modern google style nav bar for flutter.

google_nav_bar

GoogleNavBar is a Flutter widget designed by Aurelien Salomon and developed by sooxt98.

Getting Started

Add this to your package's pubspec.yaml file:

...
dependencies:
  google_nav_bar: ^5.0.3
  

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

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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].