molten_navigationbar_flutter 1.0.1 icon indicating copy to clipboard operation
molten_navigationbar_flutter: ^1.0.1 copied to clipboard

An animated bottom navigation bar with many parameters to tweak.

molten_navigationbar_flutter #

An animated bottom navigation bar with a lot of attributes to teak and have fun with ✔🚀

ImageImageImage

Getting Started #

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

dependencies:
  molten_navigationbar_flutter: ^1.0.0

Import the package #

import 'package:molten_navigationbar_flutter/molten_navigationbar_flutter.dart';

How to Use #

You can use it in the scaffold's bottomnavigationbar, or anywhere you would like! Just call the MoltenBottomNavigationBar widget and provide the tabs, onTabChange and selectedIndex attributes. The rest of the attributes are optional

Scaffold(
   bottomNavigationBar: MoltenBottomNavigationBar(
      selectedIndex: _selectedIndex,
      onTabChange: (clickedIndex) {
        setState(() {
          _selectedIndex = clickedIndex;
        });
      },
      tabs: [
        MoltenTab(
          icon: Icon(Icons.search),
        ),
        MoltenTab(
          icon: Icon(Icons.home),
        ),
        MoltenTab(
          icon: Icon(Icons.person),
        ),
      ],
   ),
),

MoltenBottonNavigationBar's Attributes #

AttributeTypeDescription
barHeightdoublespecify a Height for the bar, Default is kBottomNavigationBarHeight
domeHeightdoublespecify a Height for the Dome above tabs, Default is 15.0
domeWidthdoubleIf domeWidth is null, it will be set to 100
domeCircleColorColorIf a null value is passed, the domeCircleColor will be Theme.primaryColor
domeCircleSizedoubleThe size of the inner circle representing a seleted tab. Note that domeCircleSize must be less than or equal to (barHeight + domeHeight)
marginEdgeInsetsSpacing around the bar
barColorColorspecify a color to be used as a background color, Default is Theme.bottomAppBarColor
tabsListList of MoltenTab, each wil have an icon as the main widget, selcted color and unselected color
selectedIndexintThe currently selected tab
onTabChangeFunction(int index)callback function that will be triggered whenever a [MoltenTab] is clicked, and will return it's index.
curveCurveSelect a Curve value for the dome animation. Default is Curves.linear
durationDurationHow long the animation should last, Default is Duration(milliseconds: 150)
borderSizedoubleApplied to all 4 border sides, Default is 0
borderColorColorApplied to all border sides
borderRaduisBorderRadiusHow much each angle is curved. Note that high raduis values may decrease the dome width.

MoltenTab's Attributes #

AttributeTypeDescription
icondoublecan be any widget, preferably an icon
selectedColordoubleThe icon color when the tab is selected, White if not set
unselectedColordoubleThe icon color when the tab is not selected, Grey if not set

Example #

You can find an example here

23
likes
140
pub points
71%
popularity

Publisher

verified publisher iconaymanz.dev

An animated bottom navigation bar with many parameters to tweak.

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on molten_navigationbar_flutter