bottom_animation 1.1.0
bottom_animation: ^1.1.0

Flutter Android iOS web

Flutter Bottom Navigation Bar | if you want bottom navigation with smooth animation add this package .

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,
        ),
      ),
    );
  }
}
7
likes
90
pub points
57%
popularity

Flutter Bottom Navigation Bar | if you want bottom navigation with smooth animation add this package .

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

eslamimahmoud98@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on bottom_animation