frezyx / bottom_bar_with_sheet Goto Github PK
View Code? Open in Web Editor NEW:rocket: Flutter custom BottomBar Navigation Widget
Home Page: https://pub.dev/packages/bottom_bar_with_sheet
License: Apache License 2.0
:rocket: Flutter custom BottomBar Navigation Widget
Home Page: https://pub.dev/packages/bottom_bar_with_sheet
License: Apache License 2.0
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=
Basically the title.
When the user touches something outside the expanded BottomBar, the bar should collapse again.
Due to the new functionality from this #29 pr associated with auto-close.
He,it's possible to specify the height of Sheet in percentage of the height of the screen ?
I noticed that the build of BottomBarWithSheetItem leads to a few inconveniences.
the icon on select pushes the label down. I think this is because the splash in nonexistent beforehand.
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 ๐
The opening/closing fab doesn't work
Can you add an option to make the bottom sheet draggable to collapse? As in https://pub.dev/packages/modal_bottom_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;
}),
),`
The BottomBarWithSheet takes a key as a param, but it does not get passed to the parent via super(key:key).
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 ?
When changing between items and sheets with the index, it requires the setState function to be called in onSelectItem.
However, when the setState is called to change the index to change the sheetChild, it will cause screen flickering. (when using Flame Engine).
I think it could be resolved since opening/closing the sheet does not cause any flickering.
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.
Right now these parameters are mandatory in BottomBarWithSheet:
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.
Bottom Sheet closes automatically when clicking text field inside sheet or while filling the form...
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:
List<Message> newMessages
) 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,
)
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
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.