Need help with extended_navbar_scaffold?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ketanchoyal
131 Stars 34 Forks MIT License 24 Commits 0 Opened issues

Description

A Custom Extended Scaffold with Expandable and Floating Navigation Bar

Services available

!
?

Need anything else?

Contributors list

# 48,201
Dart
TypeScr...
firebas...
Flutter
15 commits

extendednavbarscaffold

Pub Awesome Flutter

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

Implementation

Widget Demo

Demo

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.