pedromassango / Bottom_navy_bar
Licence: apache-2.0
A beautiful and animated bottom navigation
Stars: ✭ 653
Programming Languages
dart
5743 projects
Projects that are alternatives of or similar to Bottom navy bar
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 (-89.28%)
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 (-95.41%)
Mutual labels: flutter-plugin, flutter-apps
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 (-63.71%)
Mutual labels: flutter-plugin, flutter-apps
Flutter Learning
🔥 👍 🌟 ⭐ ⭐⭐ Flutter all you want.Flutter install,flutter samples,Flutter projects,Flutter plugin,Flutter problems,Dart codes,etc.Flutter安装和配置,Flutter开发遇到的难题,Flutter示例代码和模板,Flutter项目实战,Dart语言学习示例代码。
Stars: ✭ 4,941 (+656.66%)
Mutual labels: flutter-apps, flutter-plugin
liquid button
Liquify your buttons, web demo at website
Stars: ✭ 18 (-97.24%)
Mutual labels: flutter-plugin, flutter-apps
Flutter-Apps
🌀 This is mainly focus on a complete application for production
Stars: ✭ 18 (-97.24%)
Mutual labels: flutter-plugin, flutter-apps
flutter bolg manage
Flutter实战项目,采用Getx框架管理,遵循Material design设计风格,适合您实战参考或练手
Stars: ✭ 373 (-42.88%)
Mutual labels: flutter-plugin, flutter-apps
Qrcode scanner
🛠 Flutter QR code scanner plugin.
Stars: ✭ 274 (-58.04%)
Mutual labels: flutter-apps, flutter-plugin
Flutter i18n
This plugin create a binding between your translations from .arb files and your Flutter app.
Stars: ✭ 255 (-60.95%)
Mutual labels: flutter-apps, flutter-plugin
flutter-app
Full Feature Todos Flutter Mobile app with fireStore integration.
Stars: ✭ 138 (-78.87%)
Mutual labels: flutter-plugin, flutter-apps
Flutter page transition
This is Flutter Page Transition Package
Stars: ✭ 314 (-51.91%)
Mutual labels: flutter-apps, flutter-plugin
getwidget-docs
Get Widgets UI library docs.
Stars: ✭ 17 (-97.4%)
Mutual labels: flutter-plugin, flutter-apps
swipedetector
A Flutter package to detect up, down, left, right swipes.
Stars: ✭ 34 (-94.79%)
Mutual labels: flutter-plugin, flutter-apps
getx-snippets-intelliJ
An extension to accelerate the process of developing applications with flutter, aimed at everyone using the GetX package.
Stars: ✭ 52 (-92.04%)
Mutual labels: flutter-plugin, flutter-apps
flutter-tunein
Dynamically themed Music Player built with flutter
Stars: ✭ 108 (-83.46%)
Mutual labels: flutter-plugin, flutter-apps
Flutter Credit Card Input Form
Flutter Credit Card Input form
Stars: ✭ 201 (-69.22%)
Mutual labels: flutter-apps, flutter-plugin
Flutterexampleapps
[Example APPS] Basic Flutter apps, for flutter devs.
Stars: ✭ 15,950 (+2342.57%)
Mutual labels: flutter-apps, flutter-plugin
http middleware
A middleware library for Dart's http library.
Stars: ✭ 38 (-94.18%)
Mutual labels: flutter-plugin, flutter-apps
Google nav bar
A modern google style nav bar for flutter.
Stars: ✭ 290 (-55.59%)
Mutual labels: flutter-apps, flutter-plugin
BottomNavyBar
A beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it.
Preview | PageView |
---|---|
Customization (Optional)
BottomNavyBar
-
iconSize
- the item icon's size -
items
- navigation items, required more than one item and less than six -
selectedIndex
- the current item index. Use this to change the selected item. Default to zero -
onItemSelected
- required to listen when a item is tapped it provide the selected item's index -
backgroundColor
- the navigation bar's background color -
showElevation
- if false the appBar's elevation will be removed -
mainAxisAlignment
- use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the items -
curve
- param to customize the item change's animation -
containerHeight
- changes the Navigation Bar's height
BottomNavyBarItem
-
icon
- the icon of this item -
title
- the text that will appear next to the icon when this item is selected -
activeColor
- the active item's background and text color -
inactiveColor
- the inactive item's icon color -
textAlign
- property to change the alignment of the item title
Getting Started
Add the dependency in pubspec.yaml
:
dependencies:
...
bottom_navy_bar: ^5.6.0
Basic Usage
Adding the widget
bottomNavigationBar: BottomNavyBar(
selectedIndex: _selectedIndex,
showElevation: true, // use this to remove appBar's elevation
onItemSelected: (index) => setState(() {
_selectedIndex = index;
_pageController.animateToPage(index,
duration: Duration(milliseconds: 300), curve: Curves.ease);
}),
items: [
BottomNavyBarItem(
icon: Icon(Icons.apps),
title: Text('Home'),
activeColor: Colors.red,
),
BottomNavyBarItem(
icon: Icon(Icons.people),
title: Text('Users'),
activeColor: Colors.purpleAccent
),
BottomNavyBarItem(
icon: Icon(Icons.message),
title: Text('Messages'),
activeColor: Colors.pink
),
BottomNavyBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
activeColor: Colors.blue
),
],
)
Use with PageView and PageController
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Bottom Nav Bar")),
body: SizedBox.expand(
child: PageView(
controller: _pageController,
onPageChanged: (index) {
setState(() => _currentIndex = index);
},
children: <Widget>[
Container(color: Colors.blueGrey,),
Container(color: Colors.red,),
Container(color: Colors.green,),
Container(color: Colors.blue,),
],
),
),
bottomNavigationBar: BottomNavyBar(
selectedIndex: _currentIndex,
onItemSelected: (index) {
setState(() => _currentIndex = index);
_pageController.jumpToPage(index);
},
items: <BottomNavyBarItem>[
BottomNavyBarItem(
title: Text('Item One'),
icon: Icon(Icons.home)
),
BottomNavyBarItem(
title: Text('Item Two'),
icon: Icon(Icons.apps)
),
BottomNavyBarItem(
title: Text('Item Three'),
icon: Icon(Icons.chat_bubble)
),
BottomNavyBarItem(
title: Text('Item Four'),
icon: Icon(Icons.settings)
),
],
),
);
}
}
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].