Giter VIP home page Giter VIP logo

r_nav_n_sheet's Introduction

RNavNSheet

Pub License GitHub code size in bytes GitHub stars

Animated, modern and highly customisable bottom navigation bar for flutter

Features

  • Animated, modern looking and highly customizable bottom navigation bar
  • Custom bottom sheet with center docked action button to toggle the bottom sheet
DEMO 1 DEMO 2 DEMO 3
DEMO1 DEMO2 DEMO3

Getting started

  • Add r_nav_n_sheet: <latest_version> to pubspec.yaml
  • Run flutter pub get in the terminal in the project directory or select pub get from within pubspec.yaml file
  • Add import statement,
import 'package:r_nav_n_sheet/r_nav_n_sheet.dart';

Usage

@override
Widget build(BuildContext context) {
  return Scaffold(
    //Other scaffold properties
      bottomNavigationBar: RNavNSheet(
        sheet: MySheet(), //Replace MySheet with your own bottom sheet
        items: const [
          RNavItem(
            icon: Icons.home_outlined,
            activeIcon: Icons.home,
            label: "Home",
          ),
          RNavItem(
            icon: Icons.search_outlined,
            activeIcon: Icons.search,
            label: "Search",
          ),
          RNavItem(
            icon: Icons.shopping_cart_outlined,
            activeIcon: Icons.shopping_cart,
            label: "Cart",
          ),
          RNavItem(
            icon: Icons.person,
            activeIcon: Icons.person_outline,
            label: "Account",
          ),
        ],
      )
  );
}

Additional information

For full implementation, see example

RNavItem

Attributes Type Description
icon IconData icon when item is not selected
activeIcon IconData? icon when item is selected, icon is used if activeIcon not passed
label String label for the item

RNavNSheet

Attributes Type Description
items List<RNavItem> list of bottom navigation items
initialSelectedIndex int? index of default selected item
sheet Widget? bottom sheet to be displayed on dock icon click
sheetOpenIcon IconData? toggle button icon when sheet is open
sheetCloseIcon IconData? toggle button icon when sheet is closed
sheetOpenIconBoxColor Color? toggle button background color when sheet is open
sheetCloseIconBoxColor Color? toggle button background color when sheet is closed
sheetOpenIconColor Color? toggle button foreground color when sheet is open
sheetCloseIconColor Color? toggle button foreground color when sheet is closed
sheetIconRotateAngle double? angle (in radians) to rotate toggle button when sheet is open
sheetToggleDecoration BoxDecoration? decoration for toggle button
borderColors List<Color>? list of colors for border over nav bar (gradient from left to right)
backgroundColor Color? background color of nav bar
backgroundGradient Gradient? background gradient of nav bar
selectedItemColor Color? color of selected nav item (overrides gradient)
unselectedItemColor Color? color of unselected nav item
selectedItemGradient Gradient? gradient of selected nav item
unselectedItemGradient Gradient? gradient of unselected nav item
onTap void Function(int)? function callback that returns index of selected item
onSheetToggle void Function(bool)? function callback that returns true if sheet is open and false if sheet is closed

r_nav_n_sheet's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.