Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve TUIMobileOverlayMenu #72

Open
kalpeshp0310 opened this issue May 2, 2024 · 0 comments
Open

Improve TUIMobileOverlayMenu #72

kalpeshp0310 opened this issue May 2, 2024 · 0 comments

Comments

@kalpeshp0310
Copy link
Member

kalpeshp0310 commented May 2, 2024

  1. It does not show the Overlay bottom sheet by itself. Users have to do some ceremonial work to show it as the bottom sheet.
    To show this overlay as a bottom sheet.
TUIMobileOverlayMenu(
  title: "title",
  action: () {
    print("tapped");
  },
  menuItems: [
    TUIMenuItem(
      item: TUIMenuItemProperties(
        title: "Item 1",
        style: TUIMenuItemStyle.both,
        state: TUIMenuItemState.unchecked,
      ),
      backgroundDark: true,
    ),
    TUIMenuItem(
      item: TUIMenuItemProperties(
        title: "Item 2",
        style: TUIMenuItemStyle.none,
        state: TUIMenuItemState.unchecked,
      ),
    )
  ],
)

We have to do this:

showModalBottomSheet(
  context: context,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      top: Radius.circular(
          20.0), // Adjust the top corner radius here
    ),
  ),
  builder: (BuildContext context) {
    return ClipRRect(
      borderRadius: const BorderRadius.vertical(
        top: Radius.circular(
            20.0), // Match the radius with the shape
      ),
      child: TUIMobileOverlayMenu(
        title: "title",
        action: () {
          print("tapped");
        },
        menuItems: [
          TUIMenuItem(
            item: TUIMenuItemProperties(
              title: "Item 1",
              style: TUIMenuItemStyle.both,
              state: TUIMenuItemState.unchecked,
            ),
            backgroundDark: true,
          ),
          TUIMenuItem(
            item: TUIMenuItemProperties(
              title: "Item 2",
              style: TUIMenuItemStyle.none,
              state: TUIMenuItemState.unchecked,
            ),
          )
        ],
      ),
    );
  },
);

The above code takes care of showing the model, changing its top left and right radius.
Also, TUIMobileOverlayMenu assumes that it will be displayed inside the bottom sheet. So it pops from the current stack which dismisses the bottom sheet.

I think we should have a TUI version of the showModalBottomSheet function that removes the above boilerplate code.

  1. Should we rename the callback action to onDismiss?
  2. action is not getting invoked right now. We need to invoke it when the bottom sheet is getting dismissed.
  3. Add support for more buttons.? Right now, only the dismiss (X) button is added by default. It does not allow over header and overlay footer to be used to their full extent.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant