https://github.com/ketanchoyal/extended_navbar_scaffold

A Custom Extended Scaffold with Expandable and Floating Navigation Bar
https://github.com/ketanchoyal/extended_navbar_scaffold

android cross-platform dartlang flutter flutter-examples flutter-package ios

Last synced: 24 days ago
JSON representation

A Custom Extended Scaffold with Expandable and Floating Navigation Bar

• Host: GitHub
• URL: https://github.com/ketanchoyal/extended_navbar_scaffold
• Owner: ketanchoyal
• License: mit
• Created: 2019-08-25T09:41:54.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-02-07T22:53:47.000Z (over 3 years ago)
• Last Synced: 2024-10-01T16:39:54.962Z (about 1 month ago)
• Topics: android, cross-platform, dartlang, flutter, flutter-examples, flutter-package, ios
• Language: Dart
• Size: 6.06 MB
• Stars: 144
• Watchers: 6
• Forks: 39
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# extended_navbar_scaffold

[![Pub](https://img.shields.io/pub/v/extended_navbar_scaffold)](https://pub.dartlang.org/packages/extended_navbar_scaffold) 



   



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