Skip to content

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

License

Notifications You must be signed in to change notification settings

Mindinventory/floating_bottom_bar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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(
      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.

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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages