A Custom Extended Scaffold with Expandable and Floating Navigation Bar.
Custom Extended Scaffold
Custom Flutter widgets that makes Bottom Navigation Floating and can be expanded with much cleaner and easier way.
Installing
Add the following to your pubspec.yaml
file:
dependencies:
extended_navbar_scaffold: any
Creating
ExtendedNavigationBarScaffold(
body: Container(
color: Colors.deepOrange,
),
elevation: 0,
floatingAppBar: true,
appBar: AppBar(
shape: kAppbarShape,
leading: IconButton(
icon: Icon(
EvaIcons.person,
color: Colors.black,
),
onPressed: () {},
),
title: Text(
'Extended Scaffold Example',
style: TextStyle(color: Colors.black),
),
centerTitle: true,
backgroundColor: Colors.white,
),
navBarColor: Colors.white,
navBarIconColor: Colors.black,
moreButtons: [
MoreButtonModel(
icon: MaterialCommunityIcons.wallet,
label: 'Wallet',
onTap: () {},
),
MoreButtonModel(
icon: MaterialCommunityIcons.parking,
label: 'My Bookings',
onTap: () {},
),
MoreButtonModel(
icon: MaterialCommunityIcons.car_multiple,
label: 'My Cars',
onTap: () {},
),
MoreButtonModel(
icon: FontAwesome.book,
label: 'Transactions',
onTap: () {},
),
MoreButtonModel(
icon: MaterialCommunityIcons.home_map_marker,
label: 'Offer Parking',
onTap: () {},
),
MoreButtonModel(
icon: FontAwesome5Regular.user_circle,
label: 'Profile',
onTap: () {},
),
null,
MoreButtonModel(
icon: EvaIcons.settings,
label: 'Settings',
onTap: () {},
),
null,
],
searchWidget: Container(
height: 50,
color: Colors.redAccent,
),
// onTap: (button) {},
// currentBottomBarCenterPercent: (currentBottomBarParallexPercent) {},
// currentBottomBarMorePercent: (currentBottomBarMorePercent) {},
// currentBottomBarSearchPercent: (currentBottomBarSearchPercent) {},
parallexCardPageTransformer: PageTransformer(
pageViewBuilder: (context, visibilityResolver) {
return PageView.builder(
controller: PageController(viewportFraction: 0.85),
itemCount: parallaxCardItemsList.length,
itemBuilder: (context, index) {
final item = parallaxCardItemsList[index];
final pageVisibility =
visibilityResolver.resolvePageVisibility(index);
return ParallaxCardsWidget(
item: item,
pageVisibility: pageVisibility,
);
},
);
},
),
);
Screenshots
Implementation

Widget Demo

Tags:navigation