diff --git a/example/lib/main.dart b/example/lib/main.dart index d831323..def8955 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1220,7 +1220,8 @@ class _HomePageState extends State { ), const SizedBox(height: 8), - Text("Overlay Menu", style: theme.typography.baseBold), + Text("Overlay Menu Non Scrolling", + style: theme.typography.baseBold), const SizedBox(height: 8), ElevatedButton( @@ -1244,6 +1245,7 @@ class _HomePageState extends State { action: () { print("tapped"); }, + isScrollable: false, menuItems: [ TUIMenuItem( item: TUIMenuItemProperties( @@ -1268,6 +1270,163 @@ class _HomePageState extends State { }, child: const Text('Show Modal Bottom Sheet'), ), + + const SizedBox(height: 8), + Text("Overlay Menu Non Scrolling", + style: theme.typography.baseBold), + const SizedBox(height: 8), + + ElevatedButton( + onPressed: () { + 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"); + }, + isScrollable: true, + 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, + ), + ), + 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, + ), + ), + 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, + ), + ), + 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, + ), + ), + 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, + ), + ), + 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, + ), + ), + 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, + ), + ), + 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, + ), + ) + ], + ), + ); + }, + ); + }, + child: const Text('Show Modal Bottom Sheet - Scrollable'), + ), const SizedBox(height: 8), Text("Date Picker", style: theme.typography.baseBold), const SizedBox(height: 8), diff --git a/lib/components/mobile_overlay_menu/mobile_overlay_menu.dart b/lib/components/mobile_overlay_menu/mobile_overlay_menu.dart index 1265ff5..da8dcd8 100644 --- a/lib/components/mobile_overlay_menu/mobile_overlay_menu.dart +++ b/lib/components/mobile_overlay_menu/mobile_overlay_menu.dart @@ -12,24 +12,45 @@ class TUIMobileOverlayMenu extends StatelessWidget { final double padding = 16; final double verticalGap = 8; final List menuItems; + final bool isScrollable; const TUIMobileOverlayMenu({ super.key, required this.title, required this.action, required this.menuItems, + required this.isScrollable, }); @override Widget build(BuildContext context) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - getHeaderView(context), - getMenuItemView(context), - getFooterView(context), - ], - ); + TUIThemeData theme = TUITheme.of(context); + final colors = theme.colors; + if (this.isScrollable == false) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + getHeaderView(context), + _getNonScrollingMenuItem(context), + getFooterView(context), + ], + ); + } else { + return Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + getHeaderView(context), + Expanded( + child: Container( + color: colors.surface, + child: _getMenuItemViewAsList(context), + ), + ), + getFooterView(context) + ], + ); + } } Widget getHeaderView(BuildContext context) { @@ -43,7 +64,7 @@ class TUIMobileOverlayMenu extends StatelessWidget { return TUIMobileOverlayHeader(style: style); } - Widget getMenuItemView(BuildContext context) { + Widget _getNonScrollingMenuItem(BuildContext context) { TUIThemeData theme = TUITheme.of(context); final colors = theme.colors; @@ -72,6 +93,28 @@ class TUIMobileOverlayMenu extends StatelessWidget { ); } + Widget _getMenuItemViewAsList(BuildContext context) { + return ListView( + children: menuItems.indexed.map((item) { + if (item.$1 != 0) { + return Padding( + padding: EdgeInsets.all( + padding, + ), // Apply padding of 16 pixels on all sides + child: item.$2, + ); + } else { + return Padding( + padding: EdgeInsets.all( + padding, + ), // Apply padding of 16 pixels on all sides + child: item.$2, + ); + } + }).toList(), + ); + } + Widget getFooterView(BuildContext context) { TUIOverlayFooterAction closeButton = TUIOverlayFooterAction( icon: FluentIcons.dismiss_24_regular,