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.

Bottom Sheet closes automatically when clicking text field inside sheet or while filling the form...

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=

The opening/closing fab doesn't work

Due to the new functionality from this #29 pr associated with auto-close.

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,
      )

3. 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

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.

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 ?

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

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:

He,it's possible to specify the height of Sheet in percentage of the height of the screen ?

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.

Can you add an option to make the bottom sheet draggable to collapse? As in https://pub.dev/packages/modal_bottom_sheet.

It's like only in the SafeView area...
would appreciate a fix in order to use it.

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?

Basically the title.
When the user touches something outside the expanded BottomBar, the bar should collapse again.

The BottomBarWithSheet takes a key as a param, but it does not get passed to the parent via super(key:key).

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 🙈

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.