This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

Overview

floating_bottom_bar

This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

Floating Bottom Bar

Floating Bottom Bar

Usage

Example

bottomNavigationBar: AnimatedBottomNavigationBar(
              bottomBarItems: [
                BottomBarItemsModel(
                    icon: const Icon(Icons.home, size: example.Dimens.iconNormal),
                    iconSelected: const Icon(Icons.home, color: AppColors.cherryRed, size: example.Dimens.iconNormal),
                    title: example.Strings.home,
                    dotColor: example.AppColors.cherryRed,
                    onTap: () =>log('Home'),
                ),
                const BottomBarItemsModel(
                  icon: Icon(Icons.search, size: example.Dimens.iconNormal),
                  iconSelected: Icon(Icons.search, color: AppColors.cherryRed, size: example.Dimens.iconNormal),
                  title: example.Strings.search,
                  dotColor: example.AppColors.cherryRed,
                  onTap: () =>log('Search'),
                ),
                const BottomBarItemsModel(
                  icon: Icon(Icons.person, size: example.Dimens.iconNormal),
                  iconSelected: Icon(Icons.person, color: AppColors.cherryRed, size: example.Dimens.iconNormal),
                  title: example.Strings.person,
                  dotColor: example.AppColors.cherryRed,
                  onTap: () =>log('Person'),
                ),
                const BottomBarItemsModel(
                  icon: Icon(Icons.settings, size: example.Dimens.iconNormal),
                  iconSelected: Icon(Icons.settings, color: AppColors.cherryRed, size: example.Dimens.iconNormal),
                  title: example.Strings.settings,
                  dotColor: example.AppColors.cherryRed,
                  onTap: () =>log('Settings'),
                ),
              ],
              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: () {},
                  ),
                  FloatingCenterButtonChild(
                    child: const Icon(
                      Icons.home,
                      color: AppColors.white,
                    ),
                    onTap: () {},
                  ),
                  FloatingCenterButtonChild(
                    child: const Icon(
                      Icons.home,
                      color: AppColors.white,
                    ),
                    onTap: () {},
                  ),
                ],
              ),
            ),

Required parameters

bottomBarItems:

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.

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.

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.

You might also like...

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

Apr 22, 2022

A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

Language: English |中文简体 flutter_swipe_action_cell A package that can give you a cell that can be swiped ,effect is like iOS native If you like this pa

Nov 27, 2022

GitHub Action that uses the Dart Package Analyzer to compute the Pub score of Dart/Flutter packages

GitHub Action that uses the Dart Package Analyzer to compute the Pub score of Dart/Flutter packages

Dart/Flutter package analyzer This action uses the pana (Package ANAlysis) package to compute the score that your Dart or Flutter package will have on

May 17, 2022

A Flutter package providing an easy way to add floating ribbon to images.

A Flutter package providing an easy way to add floating ribbon to images.

Floating Ribbon A new Flutter package for creating floating ribbons on images. Dependency dependencies: floating_ribbon: any How To Use In order to

Sep 26, 2022

A action bottom sheet that adapts to the platform (Android/iOS).

A action bottom sheet that adapts to the platform (Android/iOS).

Adaptive action sheet A action bottom sheet that adapts to the platform (Android/iOS). iOS Android Getting Started Add the package to your pubspec.yam

Sep 26, 2022

Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog Show alert dialog or modal action sheet adaptively according to platform. showOkAlertDialog Convenient wrapper of showAlertDialog. iOS

Oct 20, 2022

A Contextual action bar workaround for flutter

A Contextual action bar workaround for flutter

Flutter contextual action bar(CAB) CAB & Flutter CAB is a top app bar that replace the application app bar to provide contextual actions to selected i

Sep 16, 2022

Icarus - Local Action, Global Impact

Icarus - Local Action, Global Impact

Icarus Local Action, Global Impact Download · Report Bug · Request Feature Table of Contents About The Project About Icarus Todo Technologies Getting

Oct 26, 2022

Example of floating buttons using dialogs on Flutter

Example of floating buttons using dialogs on Flutter

Flutter example using floating buttons and dialogs This is a simple example showing floating buttons above a UI. These a shown via the showDialog() fu

Mar 13, 2020
Owner
MindInventory
MindInventory works with Enterprises, Startups, and Agencies since 2011 providing web, mobile app development, enterprise mobility solutions & DevOps services.
MindInventory
Master Channel cannot use Glass Floating Action Button

Problem Master Channel cannot use GlassFloatingActionButton. About This package

null 7 Oct 2, 2022
Floating Action Button Widget For Flutter

Flutter Tutorial - FloatingActionButton Widget (FAB) Embed the FloatingActionBut

Behruz Hurramov 0 Dec 27, 2021
A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by suryadevsingh.

CustomToggleSwitch A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by sur

Surya Dev Singh 1 Jun 9, 2020
Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.

Fluent UI System Icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. Icon List View the full list of

Microsoft 4.3k Nov 28, 2022
Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.

Flutter Boom Menu Usage The BoomMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton wi

Mohanraj 88 Aug 1, 2022
The Material Design Icons Icon pack available as set of Flutter Icons.

material_design_icons_flutter The Material Design Icons Icon pack available as set of Flutter Icons. Based on Material Design Icons 6.5.95. See a web

ziofat 147 Oct 26, 2022
Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

CU Apps 4 May 5, 2022
Advanced & beautiful animations inspired by animate_do and Animate.css, every animation is a widget that contains default but customizable values 💙

animate_it An animation package inspired by animate_do and Animate.css. Since the original animate_do is not being maintained, I have decided to creat

Luke Moody 3 Oct 1, 2022
Simple alarm app - An alarm with analog clock face and digital indicator in the center for flutter

simple_alarm_app A new Flutter project. Getting Started It's an alarm with analo

null 1 Mar 14, 2022
A Learning Management System Solutions Developed from Scratch inside Orange Digital Center Labs By ODC-Flutter WorkForce.

A Learning Management System Solutions Developed from Scratch inside Orange Digital Center Labs By ODC-Flutter WorkForce.

Orange Digital Center Egypt - Coding School 5 May 9, 2022