realm-3 / ss_bottom_navbar Goto Github PK

Flutter modern bottom navbar. Compatible with Android & iOS. You can customize it freely.

Home Page: https://pub.dev/packages/ss_bottom_navbar

License: Apache License 2.0

Swift 1.27% Objective-C 0.12% Dart 98.21% Kotlin 0.40%

flutter bottom-navigation navigation navbar bottombar flutter-navigation flutter-bottom-navigation flutter-bottom-app-bar flutter-bottom-navigation-bar ss-bottom-navbar

ss_bottom_navbar's Introduction

ss_bottom_navbar

Flutter modern bottom nav bar. Compatible with Android & iOS. You can customize it freely.

Getting Started

dependencies:
  ss_bottom_navbar: 0.1.1

$  flutter pub get

import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';

Example

SSBottomNav

Usage

Create Items

final items = [
  SSBottomNavItem(text: 'Home', iconData: Icons.home),
  SSBottomNavItem(text: 'Store', iconData: Icons.store),
  SSBottomNavItem(text: 'Add', iconData: Icons.add, isIconOnly: true),
  SSBottomNavItem(text: 'Explore', iconData: Icons.explore),
  SSBottomNavItem(text: 'Profile', iconData: Icons.person),
];

Create the state

SSBottomBarState _state = SSBottomBarState();

SSBottomNav(
  items: items,
  state: _state,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  onTabSelected: (index) {
     debugPrint(index);
     setState(() {
        _index = index;
    });
  }
),

With bottom sheet dialog

SSBottomNav(
  items: items,
  state: _state,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  visible: isVisible,
  bottomSheetWidget: Container(),
  showBottomSheetAt: 2,
  onTabSelected: (index) {}
),

Customization

Name	Type	Description
`items`	`List<SSBottomNavItem>`	list of `SSBottomNavItem` items
`state`	`SSBottomBarState`	state of the bottome bar as `ChangeNotifier`
`iconSize`	`double`	size of the icon on items
`backgroundColor`	`Color`	background color of the widget
`color`	`Color`	color of the slider
`selectedColor`	`Color`	items's color when selected
`unselectedColor`	`Color`	items's color when not selected
`onTabSelected`	`ValueChanged<int>`	function that returns the index on tab selected
`shadow`	`List<BoxShadow>`	shadow of the slider
`visible`	`bool`	visibilty of the `SSBottomNavItem`
`bottomSheetWidget`	`Widget`	child of the bottom sheet dialog
`showBottomSheetAt`	`int`	the index of `SSBottomNavItem` to show the `SSBottomNavItem`
`bottomSheetHistory`	`bool`	default `true`. option to go back previous tab if `showBottomSheetAt` pressed while `SSBottomSheet` showing
`dismissedByAnimation`	`ValueChanged<bool>`	function that returns true if `SSBottomSheet` dismissed by animation

SSBottomSheet

If you want to use SSBottomNav's bottom sheet dialog, you can do that with SSBottomSheet

Usage

SSBottomSheet.show(
  context: context,
  child: bottomSheet(),
  onPressed: (offset) {}
);

bottomSheet() => Container(
  color: Colors.white,
  child: Column(
    children: [
      ListTile(
        leading: Icon(Icons.camera_alt),
        title: Text('Use Camera'),
      ),
      ListTile(
        leading: Icon(Icons.photo_library),
        title: Text('Choose from Gallery'),
      ),
      ListTile(
        leading: Icon(Icons.edit),
        title: Text('Write a Story'),
      ),
    ],
  ),
);

Dismiss the Bottom Sheet

Navigator.maybePop(context);

Customization

Name	Type	Description
`Widget`	`child`	child widget
`backgroundColor`	`Color`	background color of the widget
`bottomMargin`	`double`	margin from bottom acording to your bottom navbars height
`onPressed`	`ValueChanged<Offset>`	returns `Offset` when tapped

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve in any way you want, make a pull request, or open an issue.

ss_bottom_navbar's People

Contributors

Stargazers

Watchers

Forkers

ss_bottom_navbar's Issues

[FEATURE] Option to go back to the previous item when showBottomSheetAt clicked while SSBottomSheet showing

Is your feature request related to a problem? Please describe.
When showBottomSheetAt has no proper widget to show (because SSBottomSheet will be showing) gets clicked, SSBottomSheet dismisses.

Describe the solution you'd like
I'd like to start animation to previously clicked SSBottomNavItem's index.

Describe alternatives you've considered

create a field named bottomSheetHistory
create a variable called _tempIndex to hold previously clicked SSBottomNavItem
in onTab
- if index equals to showBottomSheetAt, save _tempIndex
- else SSBottomSheet shows
in _onPressed(Offset offset)
- if index equals to showBottomSheetAt and bottomSheetHistory is true,
  - _updateIndex(_tempIndex)
  - set _service.clickedIndex to _tempIndex for animation
- else _updateIndex(index)

[BUG] Not working as expected

Describe the bug
Can't get to calculate last 3 items positions and sizes.

https://github.com/NBK-Group/ss_bottom_navbar/blob/162435c2eddaef4780c27f6036eadb90f862ec5a/lib/helper/empty_item.dart#L35-L41

To Reproduce
Steps to reproduce the behavior:

Clone the repo
Run on a real device

Expected behavior
Should be like this.

Screenshots

Smartphone (please complete the following information):

Android Emulators (first build runs smoothly but after hot restart, the same bug continues)
Android Device (Android 11)
iPhone 11 (iOS 14)

AnimatedSize clipping the widget

I'm creating a bottom navigation bar. When the app launches, the default selected navigation tab extends as seen in the gif.

The issue is when AnimatedSize starts the animate, borders cuts off. Therefore, the container's border-radius doesn't look good. I don't think I'm clipping the view.

Stackoverflow question

https://github.com/NBK-Group/ss_bottom_navbar/blob/ef3daf99193f65833b8f78d2e9744a482bce4eaa/lib/views/slide_box.dart#L39-L58

https://github.com/NBK-Group/ss_bottom_navbar/blob/ef3daf99193f65833b8f78d2e9744a482bce4eaa/lib/ss_bottom_navbar.dart#L159-L174

SSBottomNav(
  items: items,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  visible: true, // bool
  visibleDuration: Duration.zero, // Duration
  onTabSelected: (index) {},
),

realm-3 / ss_bottom_navbar Goto Github PK

ss_bottom_navbar's Introduction

Getting Started

Example

SSBottomNav

Usage

Create Items

Create the state

With bottom sheet dialog

Customization

SSBottomSheet

Usage

Dismiss the Bottom Sheet

Customization

Contributions

ss_bottom_navbar's People

Contributors

Stargazers

Watchers

Forkers

ss_bottom_navbar's Issues

Recommend Projects

Recommend Topics

Recommend Org