Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mindinventory/floating_bottom_bar
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.
https://github.com/mindinventory/floating_bottom_bar
animated-bottom-bar bottom-bar floating-bottom-bar flutter-animated-bar
Last synced: 2 months ago
JSON representation
This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.
- Host: GitHub
- URL: https://github.com/mindinventory/floating_bottom_bar
- Owner: Mindinventory
- License: mit
- Created: 2021-12-29T05:19:19.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-02-13T06:25:30.000Z (11 months ago)
- Last Synced: 2024-02-13T07:29:28.783Z (11 months ago)
- Topics: animated-bottom-bar, bottom-bar, floating-bottom-bar, flutter-animated-bar
- Language: Dart
- Homepage: https://www.mindinventory.com/flutter-app-development.php
- Size: 3.26 MB
- Stars: 17
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# floating_bottom_bar
This package will animate a floating action button at the center and icons at the bottomNavigationBar using [AnimatedContainer](https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html) and [SlideTransition](https://api.flutter.dev/flutter/widgets/SlideTransition-class.html) respectively.
### Floating Bottom Bar
## Usage
### Example
```dart
bottomNavigationBar: AnimatedBottomNavigationBar(
barColor: Colors.white,
controller: FloatingBottomBarController(initialIndex: 1),
bottomBar: [
BottomBarItem(
icon: const Icon(Icons.home, size: example.Dimens.iconNormal),
iconSelected: const Icon(Icons.home,
color: example.AppColors.cherryRed,
size: example.Dimens.iconNormal),
title: example.Strings.home,
dotColor: example.AppColors.cherryRed,
onTap: (value) {
setState(() {
index = value;
});
log('Home $value');
},
),
BottomBarItem(
icon:
const Icon(Icons.photo, size: example.Dimens.iconNormal),
iconSelected: const Icon(Icons.photo,
color: example.AppColors.cherryRed,
size: example.Dimens.iconNormal),
title: example.Strings.search,
dotColor: example.AppColors.cherryRed,
onTap: (value) {
setState(() {
index = value;
});
log('Search $value');
},
),
BottomBarItem(
icon:
const Icon(Icons.person, size: example.Dimens.iconNormal),
iconSelected: const Icon(Icons.person,
color: example.AppColors.cherryRed,
size: example.Dimens.iconNormal),
title: example.Strings.person,
dotColor: example.AppColors.cherryRed,
onTap: (value) {
setState(() {
index = value;
});
log('Profile $value');
},
),
BottomBarItem(
icon: const Icon(Icons.settings,
size: example.Dimens.iconNormal),
iconSelected: const Icon(Icons.settings,
color: example.AppColors.cherryRed,
size: example.Dimens.iconNormal),
title: example.Strings.settings,
dotColor: example.AppColors.cherryRed,
onTap: (value) {
setState(() {
index = value;
});
log('Settings $value');
},
),
],
bottomBarCenterModel: BottomBarCenterModel(
centerBackgroundColor: example.AppColors.cherryRed,
centerIcon: const FloatingCenterButton(
child: Icon(
Icons.add,
color: AppColors.white,
),
),
centerIconChild: [
FloatingCenterButtonChild(
child: const Icon(
Icons.home,
color: AppColors.white,
),
onTap: () => log('Item1'),
),
FloatingCenterButtonChild(
child: const Icon(
Icons.access_alarm,
color: AppColors.white,
),
onTap: () => log('Item2'),
),
FloatingCenterButtonChild(
child: const Icon(
Icons.ac_unit_outlined,
color: AppColors.white,
),
onTap: () => log('Item3'),
),
],
),
),
```
### Required parameters
##### bottomBar:
This property takes List as a parameter which are use to show the icons in the bottomNavigationBar.
##### bottomBarCenterModel:
BottomBarCenterModel class is model class for bottom menu. It takes icon, iconSelected, title, titleStyle as parameters.
##### controller:
FloatingBottomBarController is used to give the initial index to the bottom bar to have the pre selected item form the bottom bar.
## Guideline for contributors
Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.
## Guideline to report an issue/feature request
It would be great for us if the reporter can share the below things to understand the root cause of the issue.
- Library version
- Code snippet
- Logs if applicable
- Device specification like (Manufacturer, OS version, etc)
- Screenshot/video with steps to reproduce the issue
# LICENSE!
Animated Segment is [MIT-licensed](https://github.com/Mindinventory/animated_segment/blob/master/LICENSE "MIT-licensed").
# Let us know!
We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.