Flutter custom BottomBar Navigation Widget

Overview

bottom_bar_with_sheet

Build Status License Pub Stars

๐Ÿ’ฅ Non-standard way to use more space of screens in your application ๐Ÿ’ฅ
๐Ÿ˜ณ Custom bottom Sheet under Bottom Navigation Bar ๐Ÿ˜ณ
๐Ÿ˜ฉ Sounds sucks? ๐Ÿ˜‰ First of all look at screens!

Image Image Image

Getting Started

Add dependency

dependencies:
  bottom_bar_with_sheet: ^2.0.1

Add import package

import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';

Easy to use

Create a Scaffold widget and set bottomNavigationBar with BottomBarWithSheet like in the code below

print('item $index was pressed'), items: [ BottomBarWithSheetItem(icon: Icons.people), BottomBarWithSheetItem(icon: Icons.shopping_cart), BottomBarWithSheetItem(icon: Icons.settings), BottomBarWithSheetItem(icon: Icons.favorite), ], ), /// ----------------------------------[end of widget]---------------------------------- );">
Scaffold(
      body: Center(child: Text("Place for your content")),
// -----------------------------------------------------------------------------
      bottomNavigationBar: BottomBarWithSheet(
        selectedIndex: 0,
        sheetChild: Center(child: Text("Place for your another content")),
        bottomBarTheme: BottomBarTheme(
          mainButtonPosition: MainButtonPosition.middle,
          selectedItemBackgroundColor: const Color(0xFF2B65E3),
        ),
        mainActionButtonTheme: MainActionButtonTheme(
          size: 60,
          color: const Color(0xFF2B65E3),
          icon: Icon(
            Icons.add,
            color: Colors.white,
            size: 35,
          ),
        ),
        onSelectItem: (index) => print('item $index was pressed'),
        items: [
          BottomBarWithSheetItem(icon: Icons.people),
          BottomBarWithSheetItem(icon: Icons.shopping_cart),
          BottomBarWithSheetItem(icon: Icons.settings),
          BottomBarWithSheetItem(icon: Icons.favorite),
        ],
      ),
/// ----------------------------------[end of widget]----------------------------------
    );

More examples you can see here

Attributes

Attribute Type Annotation
isOpened bool Responsible for the open / closed state of the widget
autoClose bool If true the [BottomBarWithSheetItem]'s DO NOT automatically close the child sheet when pressed
disableMainActionButton bool disable MainActionButton if true , enable if false
sheetChild Widget that displayed on bottom of BottomBarWithSheet when isOpened == true
items List BottomBarWithSheetItem navigation buttons of BottomBarWithSheet
bottomBarTheme BottomBarTheme theme of BottomBarWithSheet
mainActionButtonTheme MainActionButtonTheme theme of Main Action Button
onSelectItem Function Callback Function works by clicking on one of items Return int index of selected button
selectedIndex int index of selected BottomBarWithSheetItem from items
duration Duration animation time of closing / opening BottomBarWithSheet
curve Curve the style of animation from the suggested ones of Curve
bottomBarMainAxisAlignment MainAxisAlignment The direction in which the widget content will line up
mainActionButton MainActionButton Custom version of Main Action Button

Attributes of BottomBarTheme

Attribute Type Annotation
height double BottomBarWithSheet icons line height
heightOpened double BottomBarWithSheet height when isOpened == true
heightClosed double BottomBarWithSheet height when isOpened == false
decoration BoxDecoration decoration of BottomBarWithSheet
contentPadding EdgeInsets create padding between content of widget and sides
backgroundColor Color BottomBarWithSheet background color
selectedItemIconColor Color selected item icon color
itemIconColor Color unselected item icon color
selectedItemTextStyle Color selected item text style
itemTextStyle Color unselected item text style
selectedItemIconSize double size of item icon when item is pressed
mainButtonPosition enum filed that response for the position of MainActionButton position this field have 3 possible values: MainButtonPosition.left, MainButtonPosition.right , MainButtonPosition.Center

Attributes of MainActionButtonTheme

Attribute Type Annotation
size double size of button
icon Widget icon that displayed in center of MainActionButton
color Color background color of widget circle
splash Color splash color of widget circle
margin EdgeInsets side paddings of Main Action Button
transform Matrix4 This field can set transform location of Main Action Button



For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Comments
  • Feature request: FAB outside bottom bar

    Feature request: FAB outside bottom bar

    Amazing work on the bottom_bar_with_sheet!

    Would it be possible to add a fourth option to the placement of the FAB, in order to place the FAB outside the bottom bar? This would allow for hiding the bottom bar completely (height 0), and the bottom bar could be opened by clicking the FAB.

    Inspiration: This piece by Eike Drescher, UpLabs

    image

    feature request 
    opened by eivihnd 7
  • Increase item touch area

    Increase item touch area

    I noticed that the item gesture detector only runs after tapping inside the icon. Unlike default TabBar where there is an touchable area around.

    In my usage experience, sometimes I have to tap again. I believe if increasing the touch area would solve this problem.

    bug report fix solved 
    opened by murilozas 2
  • BottomBarWithSheetItem splash issues

    BottomBarWithSheetItem splash issues

    I noticed that the build of BottomBarWithSheetItem leads to a few inconveniences.

    1. the icon on select pushes the label down. I think this is because the splash in nonexistent beforehand.

    2. The area that excepts input is way to small. For the bottom bar I would expect the touchable area to fill the whole the whole Column/Row.

    @Frezyx I would be happy to assist you also in this project, but please add a few more comments beforehand :see_no_evil:

    https://user-images.githubusercontent.com/77293597/115225377-4a1d9980-a10e-11eb-9fb2-981de7e62f17.mp4

    enhancement feature request solved 
    opened by jlnrrg 2
  • icon size didn't resize

    icon size didn't resize

    Hello ... first: thank you for developing awesome lib

    I have a weird issue about icon size I can't resize it !!

    note : I'm using Getx lib .

    my code is

    bottomBarTheme: BottomBarTheme(
      height: 60,
      heightClosed: 60,
      heightOpened: 300,
      backgroundColor: Colors.blueGrey.shade900,
      mainButtonPosition: MainButtonPosition.left,
      selectedItemIconColor: Colors.white,
      itemIconColor: Colors.blueGrey.shade300,
    
      itemIconSize: 30,  //  <- here
      selectedItemIconSize: 35,  //  <- here
    ),
    

    I have even tried to change lib source code but to no avail

    class BottomBarTheme {
      // ...........................
      /// [double] size of item icon when item is pressed
      final double selectedItemIconSize;
    
      /// [double] size of item icon when item is not selected
      final double itemIconSize;
    
      BottomBarTheme({
        this.contentPadding = _kDefaultContentPadding,
        this.height = 75,
        this.heightOpened = 400,
        this.heightClosed = 75,
        this.backgroundColor,
        this.selectedItemIconColor,
        this.itemIconColor,
        this.selectedItemTextStyle,
        this.itemTextStyle,
        this.mainButtonPosition = MainButtonPosition.middle,
        this.decoration,
        this.itemIconSize = 30,
        this.selectedItemIconSize = 35,
      });
    }
    

    also when trying to change size based on screen width .. it only take the initial size with no more change even for small screen width like this :

    mainActionButtonTheme: MainActionButtonTheme(
      size: (context.width > 500) ? 50 : 35,
      color: Colors.blueGrey.shade400,
      splash: Colors.white,
      icon: Icon(
        Icons.add,
        color: Colors.white,
        size: (context.width > 500) ? 35 : 25,
      ),
    ),
    

    what I want is to resize icon size based on screen width this is my full code :

    bottomNavigationBar: GetBuilder<SheetController>(
      init: SheetController(),
      builder: (value) => BottomBarWithSheet(
        controller: BottomBarWithSheetController(
          initialIndex: value.selectedIndex,
        ),
        selectedIndex: value.selectedIndex,
        sheetChild: Container(),
        bottomBarTheme: BottomBarTheme(
          height: 60,
          heightClosed: 60,
          heightOpened: 300,
          backgroundColor: Colors.blueGrey.shade900,
          mainButtonPosition: MainButtonPosition.left,
          selectedItemIconColor: Colors.white,
          itemIconColor: Colors.blueGrey.shade300,
          itemIconSize: 30,
          selectedItemIconSize: 35,
        ),
        mainActionButtonTheme: MainActionButtonTheme(
          size: (context.width > 500) ? 50 : 35,
          color: Colors.blueGrey.shade400,
          splash: Colors.white,
          icon: Icon(
            Icons.add,
            color: Colors.white,
            size: (context.width > 500) ? 35 : 25,
          ),
        ),
        onSelectItem: (item) => Get.find<SheetController>().setIndex(item),
        items: [
          BottomBarWithSheetItem(icon: Icons.home_rounded),
          BottomBarWithSheetItem(icon: Icons.shopping_cart),
          BottomBarWithSheetItem(icon: Icons.settings),
          BottomBarWithSheetItem(icon: Icons.favorite),
          BottomBarWithSheetItem(icon: Icons.donut_large),
          BottomBarWithSheetItem(icon: Icons.bar_chart_sharp),
          BottomBarWithSheetItem(icon: Icons.backup_rounded),
          BottomBarWithSheetItem(icon: Icons.camera_alt),
        ],
      ),
    ),
    

    so is there any idea ?

    bug report fix solved 
    opened by Marrawi1994 1
  • Programmatically Close sheet

    Programmatically Close sheet

    I am unable to open/ close the sheet programmatically.

    Use case: I am embedding a List view menu into my sheet. When an item is selected I want to close the sheet and navigate to the selected page.

    Issue: Changing the value of my isMenuOpen variable does not toggle the sheet.

    Code snippet: `class _RootScreenState extends State { final _scaffoldKey = GlobalKey(); int _selectedIndex = 0; bool _isMenuOpen = true;

    @override Widget build(BuildContext context) { return Scaffold( key: _scaffoldKey, bottomNavigationBar: BottomBarWithSheet( selectedIndex: _selectedIndex, duration: Duration(milliseconds: 250),

       //OPEN BY DEFAULT FOR DEMO
        isOpened: _isMenuOpen,
    
        sheetChild: Container(
          child: ListView(
            children: [
              ListTile(
                title: Text(
                  'Settings',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
    
               // SHOULD CLOSE SHEET
                onTap: () => setState(() {
                  _isMenuOpen = false;
                }),
              ),`
    

    Demo: sheetBug

    opened by fhidal01 1
  • Overwork of mandatory elements

    Overwork of mandatory elements

    Right now these parameters are mandatory in BottomBarWithSheet:

    • bottomBarTheme
    • sheetChild
    • onSelectItem and also the MainActionButtonTheme requires an icon.

    From my point of view the MainActionButtonTheme (and MainActionButton) should orientate more on the FloatingActionButton which has no required field. If there is no icon provided this does not matter, as the FAB is there but just without an icon. Also the bottomBarTheme must not be required as the package should provide default settings based on the Theme.of(context) values or internal default values.

    feature request bug report 
    opened by jlnrrg 1
  • Divider between Appbar and Content

    Divider between Appbar and Content

    Rn the content is hard to visually seperate when the background color for the AppBar and the content is both white. The addition of a Divider() between them might come in useful here.

    image

    feature request 
    opened by jlnrrg 1
  • changed BottomBarWithSheetItem to be able to take IconData or an Icon โ€ฆ

    changed BottomBarWithSheetItem to be able to take IconData or an Icon โ€ฆ

    โ€ฆ(or any widget), this parallels how BottomNavigationBarItem works and allows for ImageIcon's use, etc.

    There are no changes needed by any existing/future code if IconData is used as was previously the only option.

    opened by timmaffett 1
  • Real life usage

    Real life usage

    The widget looks interesting. Are there some people who can provide real life examples where this is used? How does it help that the area is opened below navigation?

    opened by adrianvintu 5
  • setState not updating the Icon

    setState not updating the Icon

    Describe the bug I have a variable in my AppState, and I would like to change an icon depending on this variable, after a setState(). It seems the icon is changing only if I go to another page...

    To Reproduce Steps to reproduce the behavior:

    1. Have a variable in your AppState (here it's List<Message> newMessages)
    2. Have an Icon based on this variable :
        List<BottomBarWithSheetItem> lstItems = [
          BottomBarWithSheetItem(
              icon: container.state.newMessages?.isEmpty ? Icons.mail_outline : Icons.mark_email_unread_outlined,
              label: 'MESSAGES'),
          //...
        ];
    
        return SafeArea(
          child: BottomBarWithSheet(
            controller: _bottomBarController,
           // ...
            items: lstItems,
          )
    
    1. Have an action to update your variable, and setState()
      void checkNewMessages() async {
          //...
              this.setState(() {
                state.newMessages.add(msg);
              });
      }
    

    Expected behavior After calling checkNewMessages, the Icon should be mark_email_unread_outlined, but it says mail_outline.

    Maybe it's not a bug, maybe It's my code the bug, but I've not find anything in your documentation regarding this...

    Thanks

    opened by Punt13140 0
  • Issue open close sheet

    Issue open close sheet

    I'm facing with an issue with sheet. At first time sheet open and close correctly but if i use anythings in a sheet it wont close or reopen. This is a link to video that show the problem, https://streamable.com/cuxv2k The code used https://nopaste.ml/#XQAAAQCeEQAAAAAAAAAQaZiMp3f2ANWovBBWoCc58NZwPuU3O5XpPKRc8D5Y+9LR0B3WorZH6vo9jcwqN/twqcKFIHaz1MiiVh3HGoNS+duMy1bA5sABT/q2kPd/y91QjwzwK7ohuisWFTyTrxV5YN++JChL6ZNCvvF0M/AAG4fGLXagMi//Xcjggb5yBv/KVmGyaRGbF/9LpLD/A7AJ/DFmPUktnTi2gwlqXkwcRdJ+FxNcB8dNGQ3g9ZtKjDxF33aS3dF7IzT9PFv723o0+YOpjU9yGeEJqOzq0d64+rMTsRIz+GbdfAZYclGCpuP5EYpwqpTbiEQylpoG7/MLy+6y8/T/F62oxU9DOkDswgx+wTQGddIDJJ88RGCqESfhp6AqIukKGAiDQ/KOhvdSOQ1BjoGSq2R1TY7vPssLKdRO+H3ch/t7+t/QUWT6mXNng+2aB26Dytd9DvVUEsOLeZXj+BtXD7Wi7ZIQFTu0POwDiizsEUUirEp9mfXFpbVu2NfBUcl/mhxeQ/3aaw+DrWd2gwojxkOo76ioVajl3PNtEB+TlqTk58C1NpCVSdSa9w76eTq9s6r8nIDEWmejmw/AYM1VH9nxmYNJ+PnZSQHjksrjHHYvJmtSy/Q5l2r+oj8hBC/fvcfAcByOpeqpQ6ve5bcVf5LjTfF4Xpu7sswJ8y2Ns5DDEAAd/rns+4dW0XsCHFghFCKtU+bENYD3AV5JcBn/stZbM5tWJrucd/7xJlqoIYbABW7t2rQ92R1Vil+mpNoUAhk5UioZ6mH5mbAhgGQU9jzP32Rqv1F/alOx7pqdJ3p2iiczR6g+On8g0WLjUR3El/4Mz3D+tCl8UMi0zIaefrnnJ+gpf21zvu3VzNj29R7TaU92jdXLDf75NanHXnUI8sVFelSxIPgSjOyyJwlLG5L9ooPF5YIBJwrssICvsbex1/abWS2/TZYP7qh7iLRskYP4T8b+6J725xnrERHGtH1cW81GJwwrumj8b7sJb4lSqNjgGWoQvVe4sTN5trrwPlkURl56yvtGn4/R9TvAow4sJjAknbAL4MudxDHOds6ZlqZprBvpZ1F+eZVCVSUpw6zC9adSwLRGdzM9yxtent5wqaA8FuIwJkr6NkE5/vzRgMfxAPHfG/KuhwT7AXTHQLuqBYuGp3YaCbXYGaen/O0Z3f8t/AjnvBHUoquu/a4WFNQ9eHM2ASPY96Smq9cpOvth3dfAzNsktg2PGuSD0wG4w4H+OhR0/mTlGpJD0bUdNynIppU0rJv1zgEFS98ds5FLzVjZcJeTuJ6qM+teq8pCAtMcLRDU4Z5j0AZhXvTqlEJp/ZSULazymIUhTVDFT9axx9hoBNmq22PaFTuPsIjBSjQ3Ry3lVoLSuDZuNDrxvE2ydkstLqn9VPnkBUoJi4JSgWXO87IgcKo5BzwipKX9SmKgHQKGJ8VYf09p5lDVdNYoMnC+pWgwY4RN20pIVGeyAhQchZ6b/q/jNSL89bRurfmGDFJb/+RsUXA=

    opened by francescoprisco 6
Releases(2.4.0)
Owner
Stanislav Ilin
Your code's boyfriend
Stanislav Ilin
Custom Bottom navigation bar on Flutter.

Intro Custom Bottom navigation bar on Flutter. The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font cu

Ihab Zaidi 2 Oct 8, 2021
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 a

Ketan Choyal 139 Dec 10, 2022
Flutter Flows made easy! A Flutter package which simplifies navigation flows with a flexible, declarative API.

Flutter Flows made easy! Usage Define a Flow State The flow state will be the state which drives the flow. Each time this state changes, a new navigat

Felix Angelov 337 Dec 31, 2022
Elegant abstraction for complete deep linking navigation in Flutter

Flutter Deep Link Navigation Provides an elegant abstraction for complete deep linking navigation in Flutter. This package only provides deep linking

Dennis Krasnov 64 Dec 27, 2022
A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0 (Router). If you love Flutter, you would love declarat

Zeno Nine 20 Jun 28, 2022
A Flutter implementation of a customizable navigation bar with animations.

A heavily customizable bottom navigation bar with some animation modifiers.

null 1 Jun 17, 2022
flutter bottom navigation bat project

bottom_navigation A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Danushan Ravendran 3 Sep 23, 2021
Fast code and awesome design-ui for flutter navigation bar

Flutter-awesome-bottom-navigation-bar ??โ€?? Fast code and awesome design-ui for flutter navigation bar ?? Getting Started # First you need to add flas

Hmida 20 Nov 22, 2022
A flutter navigation package

Create By Me(Agalaba Ifeanyi Precious) go Navigate Navigate Like a pro from one Screen to another Using go navigate. go_Navigate provide you the abili

Agalaba Ifeanyi Precious 2 Oct 11, 2021
Flutter Material Design Navigation Drawer Menu

navigation_drawer_menu Flutter Material Design Navigation Drawer Menu Navigation drawer is a common UI pattern for adaptive menus. The Material Design

Christian Findlay 9 Dec 12, 2022
A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Sander R. D. Larsen 186 Jan 7, 2023
Customized ๐Ÿš€ Bottom Navigation Bar Using Flutter ๐Ÿฆ

Customized ?? Bottom Navigation Bar Using Flutter ??

AmirHossein Bayat 3 Dec 7, 2022
Transparent Android system navigation bar with Flutter and FlexColorScheme package.

Sysnavbar with FlexColorScheme Transparent Android system navigation bar with Flutter and FlexColorScheme. FlexColorScheme V4 Notice If you are using

Rydmike 12 Oct 21, 2022
A Flutter package for easy implementation of curved navigation bar

curved_navigation_bar pub package A Flutter package for easy implementation of curved navigation bar. Add dependency dependencies: curved_navigation

null 556 Dec 9, 2022
Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Riverpod navigation If you are interested in the motivation why the package was created and a detailed description of what problems it solves, read th

pavelpz 20 Dec 13, 2022
Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested routes.

Routemaster Hello! Routemaster is an easy-to-use router for Flutter, which wraps over Navigator 2.0... and has a silly name. Features Simple declarati

Tom Gilder 291 Jan 3, 2023
Persistent Bottom Navigation Bar

Persistent Bottom Navigation Bar A persistent/static bottom navigation bar for Flutter. NOTE: Those migrating from pre 2.0.0 version should check the

Bilal Shahid 421 Dec 20, 2022
A bottom navigation bar that you can customize with the options you need, without any limits.

Bottom Personalized Dot Bar A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the a

null 103 Oct 20, 2022
Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Portuguรชs The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Luke Pighetti 3.5k Jan 4, 2023