GitLocker: The Coding Marketplace

Description:

molten navigationbar flutter

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

Getting Started #
Add this to your package's pubspec.yaml file: #
dependencies:
molten_navigationbar_flutter: ^1.0.0
copied to clipboard
Import the package #
import 'package:molten_navigationbar_flutter/molten_navigationbar_flutter.dart';
copied to clipboard
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),
),
],
),
),
copied to clipboard
MoltenBottonNavigationBar's Attributes #

Attribute
Type
Description

barHeight
double
specify a Height for the bar, Default is kBottomNavigationBarHeight

domeHeight
double
specify a Height for the Dome above tabs, Default is 15.0

domeWidth
double
If domeWidth is null, it will be set to 100

domeCircleColor
Color
If a null value is passed, the domeCircleColor will be Theme.primaryColor

domeCircleSize
double
The size of the inner circle representing a seleted tab. Note that domeCircleSize must be less than or equal to (barHeight + domeHeight)

margin
EdgeInsets
Spacing around the bar

barColor
Color
specify a color to be used as a background color, Default is Theme.bottomAppBarColor

tabs
List
List of MoltenTab, each wil have an icon as the main widget, selcted color and unselected color

selectedIndex
int
The currently selected tab

onTabChange
Function(int index)
callback function that will be triggered whenever a [MoltenTab] is clicked, and will return it's index.

curve
Curve
Select a Curve value for the dome animation. Default is Curves.linear

duration
Duration
How long the animation should last, Default is Duration(milliseconds: 150)

borderSize
double
Applied to all 4 border sides, Default is 0

borderColor
Color
Applied to all border sides

borderRaduis
BorderRadius
How much each angle is curved. Note that high raduis values may decrease the dome width.

MoltenTab's Attributes #

Attribute
Type
Description

icon
double
can be any widget, preferably an icon

selectedColor
double
The icon color when the tab is selected, White if not set

unselectedColor
double
The icon color when the tab is not selected, Grey if not set

Example #
You can find an example here