Animated Bottom Navigation

pub package

Flutter package for add bottomNavigation to you application

pic

Show case :

Flat Navigation BarWith border radiusDark One
purpuleblue_graydark

How to use :

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  bottom_animation: ^<last_version>

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:bottom_animation/bottom_animation.dart';

Widget parameters :

nametypedescriptiondefault_value
selectedIndexintindex of selected item-
hoverAlignmentDurationintcontroll movement speed of hover700(milliesecond)
itemsListlist of bottom navigition item-
backgroundColorColorbackground color of bottom navigation-
activeIconColorColorcolor of selected item-
deactiveIconColorColorcolor of unselected item-
iconSizedoublesize of BottomNavIcon30
textStyleTextStyletext style for title of each BottomNavItemTextStyle(color: Colors.white, fontSize: 18.0, fontWeight: FontWeight.w300)
onItemSelectValueChanged--
barHeightdoublebottom navigation height80
barRadiusdoublebottom navigation border radius0
itemHoverColorColorbackground color of each item-
itemHoverColorOpacitydouble-13
itemHoverBorderRadiusdouble-15
itemHoverWidthdouble-150
itemHoverHeightdouble-55

BottomNavItem :

nametype
titleString
iconDataIconData

Contribution

- Your Pull Requests are welcome 🥳🙏.

example :

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var items = <BottomNavItem>[
    BottomNavItem(title: 'Home', iconData: CupertinoIcons.heart),
    BottomNavItem(title: 'Profile', iconData: CupertinoIcons.person),
    BottomNavItem(title: 'Setting', iconData: CupertinoIcons.search),
    BottomNavItem(title: 'tools', iconData: CupertinoIcons.bluetooth),
  ];

  var cIndex;
  @override
  void initState() {
    cIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'example',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        bottomNavigationBar: BottomAnimation(
          selectedIndex: cIndex,
          items: items,
          backgroundColor: Colors.blueGrey,
          onItemSelect: (value) {
            setState(() {
              cIndex = value;
            });
          },
          itemHoverColor: Colors.white,
          itemHoverColorOpacity: .9,
          activeIconColor: Colors.blueGrey,
          deactiveIconColor: Colors.white.withOpacity(.9),
          barRadius: 40,
          textStyle: TextStyle(
            color: Colors.blueGrey,
            fontWeight: FontWeight.bold,
          ),
          itemHoverWidth: 130,
          itemHoverBorderRadius: 40,
        ),
      ),
    );
  }
}

Libraries

bottom_animation
bottomnav_item