Flutter custom Bottom Bar Widget

bottom_bar_with_sheet

flutter custom bottom bar widget.

��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!

getting started

add dependency

dependencies:
  bottom_bar_with_sheet: ^0.2.0 #latest version

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

scaffold(
      body: center(child: text("place for your content")),
// -----------------------------------------------------------------------------
      bottomnavigationbar: bottombarwithsheet(
        sheetchild: center(child: text("place for your another content")),
        selectedindex: 0,
        stylebottombar: bottombartheme(
          mainbuttonposition: mainbuttonposition.right,
          mainactionbuttonsize: 55,
          barheightclosed: 75,
          barheightopened: 400,
          mainactionbuttoniconclosed: icon(
            icons.add,
            color: colors.white,
            size: 30,
          ),
          mainactionbuttoniconopened: icon(
            icons.close,
            color: colors.white,
            size: 30,
          ),
        ),
        onselectitem: (index) => print("$index bar item is selected"),
        items: [
          bottombarwithsheetitem(
            icondata: icons.people,
            label: 'profile',
            selectedbackgroundcolor: colors.blue,
          ),
          bottombarwithsheetitem(
            icondata: icons.shopping_cart,
            label: 'cart',
            selectedbackgroundcolor: colors.blue,
          ),
          bottombarwithsheetitem(
            icondata: icons.settings,
            label: 'settings',
            selectedbackgroundcolor: colors.blue,
          ),
        ],
      ),
// ----------------------------------[end of widget]----------------------------------
    );

attributes

sheetchild: an widget to display on bottom sheet

selectedindex: index of element in tab panel, can be used to change screens

duration: time to open the sheet

onselectitem: function handling taps on items in tab panel

isopened: bool value. set true if you need to open bottom sheet when page was builded

items: list of bottombarwithsheetitem(

• • icondata: icon widget that you use in tab button

 

• • label: text under tab button

 

• • selectedbackgroundcolor: background color of circle when tab bar is selected

 

• • itemwidth: custom width of element in tab panel

 

• • animationduration: speed of animation

 

• • itemiconcolor: custom color of element in tab panel

 

)

stylebottombar: -> list of style settings to customize your bottom_bar_with_sheet ->(

• • sizes

 

• • barbackgroundcolor: background color of main widget

 

• • rightmargin: size of space between right mobile border and widget insides

 

• • leftmargin: size of space between left mobile border and widget insides

 

• • marginbetweenpanelandacttionbutton: it seems so clear. no?. request issue if so.

 

• • barheightclosed: main widget height when sheet is closed

 

• • barheightopened: main widget height when sheet is opened

 

• • mainactionbuttonpadding: space beetwen circle border and icon of main action button

 

• • mainactionbuttonsize: size of main action button

 

• • notchmargin: radius of space size between floatingactionbar and bottomnavigationbar (if you need in fab)

 

• • colors

 

• • mainactionbuttoncolorsplash: main action button splash color

 

• • mainactionbuttoncolor: main action button color

 

• • barbackgroundcolor: backgroun color of tab panel

 

• • selecteditembackgroundcolor: background circle color of selected item

 

• • selecteditemiconcolor: color of selected item icon

 

• • selecteditemlabelcolor: color of selected item text

 

• • itemiconcolor: color of unselected item icon

 

• • itemlabelcolor: color of unselected item text

 

• • widgets & full styles

 

• • mainactionbuttoniconclosed: icon when sheet is closed

 

• • mainactionbuttoniconopened: icon when sheet is opened

 

• • selecteditemlabelcolor: text style of selected item text

 

• • itemtextstyle: text style unselected item text

 

• • borderradius: main widget border radius

 

• • boxshadow: main widget shadow

 

)

for help getting started with flutter, view our
online documentation, which offers tutorials,
samples, guidance on mobile development, and a full api reference.