bottom_animation 2.0.0
bottom_animation: ^2.0.0 copied to clipboard

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 your application

pic

Contribution #

- Your Pull Requests are welcome 🥳🙏. #

Show case : #

Flat Navigation Bar Custom widgetWith border radius Custom WidgetCurved with custom widget
greenpinkorange
Flat Navigation BarWith border radiusDark One
:----------------------------------------------------------::----------------------------------------------------------::----------------------------------------------------------:
purpuleblue_grayydark

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

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,
        ),
      ),
    );
  }
}
16
likes
110
pub points
64%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on bottom_animation