bottom sheet expandable bar
this package create a bottom navigation bar with the capability to show a bottom sheet.
instalation
include bottom_sheet_expandable_bar in your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
bottom_sheet_expandable_bar: version
usage
to use this package, just import it into your file and enjoy it.
import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:bottom_sheet_expandable_bar/bottom_sheet_expandable_bar.dart';
...
bottomsheet: bottombarsheet(
children: [
bottomsheetbaricon(
icon: icon(icons.home),
color: colors.redaccent,
ontap: (){
},
),
bottomsheetbaricon(
icon: icon(icons.person),
color: colors.blueaccent,
ontap: (){
},
),
bottomsheetbaricon(
icon: icon(icons.edit),
color: colors.blue[800],
ontap: (){
},
),
bottomsheetbaricon(
icon: icon(icons.star),
color: colors.orangeaccent,
ontap: (){
},
),
],
),
...
important: add this line to your theme to avoid an unexpected behaviour
theme: themedata(
/// add this line
bottomsheettheme: bottomsheetthemedata(backgroundcolor: colors.transparent),
),
bottomsheetbaricon
this widget allow to generate a dynamic icon
properties
| name | description | required | default |
|---|---|---|---|
| icon | widget to put as button icon | false | |
| color | color to indicate icon color | false | colors.black |
| ontap | function to handle button on tap | true |
bottombarsheet
this widget allow to generate a bottom bar with the capability to expanto to a bottom sheet
properties
| name | description | required | default |
|---|---|---|---|
| children | list of bottomsheetbaricon widget to show icons within the bar | false | |
| buttonposition | buttonbottombarposition to indicate expandable button position (center, end) | false | buttonbottombarposition.center |
| backgroundbarcolor | color to indicate bottom bar background color | false | colors.white |
| backgroundcolor | color to indicate bottom sheet color | false | colors.white |
| showexpandablebutton | boolean value to indicate when to show or hide expandable button | false | false |
| innerchild | widget to show into the bottom sheet | false | |
| bottomradius | double value to indicate the corners radius for the bottom bar | false | 50.0 |
| bottombarheight | double value to indicate the bottom bar height | false | 60.0 |
| bottombarwidth | double value to indicate the bottom bar height | false | screen width * 0.9 |
| duration | duration between show or hide the bottom sheet | false | 250 milliseconds |
| bottomsheetheight | double value to indicate the bottom sheet height | false | screen height * 0.75 |
| iconexpand | icon to show into the expandable button | false | icon(icons.navigation) |
| iconcolor | expandable button color | false | colors.green |
| onclose | function to call when bottom sheet is closed | false | (){} |
| currentindex | integer value to indicatet which tab is selected | false | 0 |
| curve | curve to use on enter bottom sheet animation | false | curves.ease |
expandable button at center
expandable button at end
as a simple navigation bar
Comments are closed.