Translucent navigation bar with Glassmorphism effect
Light mode | Dark mode |
---|---|
To install, add it to your pubspec.yaml
file:
dependencies:
translucent_navigation_bar:
import 'package:translucent_navigation_bar/src/translucent_navigation_bar_item.dart';
extendBody: true,
If you want to have a main icon make sure the number of items is even so that main icon is in the center
return Scaffold(
extendBody: true,
bottomNavigationBar: TranslucentNavigationBar(
mainTranslucentNavigationBarItem: TranslucentNavigationBarItem(
iconData: PhosphorIcons.plus,
),
onTap: (value) {
setState(() {
selectedIndex = value;
});
_pageController.animateToPage(
selectedIndex,
duration: const Duration(milliseconds:750),
curve: Curves.bounceIn,
);
},
onMainIconTap: () {
showDialog(
context: context,
builder: (context) => const AlertDialog(
title: Text('Main Icon pressed'),
),
);
},
selectedIndex: selectedIndex,
mainIconBackgroundColor: const Color(0xff0066ff),
mainIconColor: Colors.white,
items: [
TranslucentNavigationBarItem(
iconData: PhosphorIcons.houseSimple,
),
TranslucentNavigationBarItem(
iconData: PhosphorIcons.chat,
),
),
],
),
body: PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _pageController,
children: [
],
),
);
-
items
: A list of tabs to display which must be list ofTranslucentNavigationBarItem
-
height
: Height of the AppBar(default: 75.0)
-
width
: Width of the AppBar(default: double.infinity)
-
borderRadius
: Border radius of the AppBar(default: 40.0)
-
blur
: Blur extent of AppBar(default: 20.0)
-
verticalPadding
: Padding on the top and bottom of AppBar(default: 25.0)
-
horizontalPadding
: Padding on the left and right sides of AppBar(default: 20.0)
-
onTap
: Returns the index of the tab that was tapped -
selectedIndex
: The tab to display. -
selectedColor
: The color of the icon when the item is selected. -
unselectedColor
: The color of the icon when the item is unselected. -
mainTranslucentNavigationBarItem
: Main icon of TranslucentNavigationBar must beTranslucentNavigationBarItem
-
mainIconBackgroundColor
: Main icon background color in middle of AppBar -
mainIconColor
: Main icon color in middle of AppBar -
onMainIconTap
: Main icon function on tap