Skip to content

Commit

Permalink
made the mobile overlay scrollable
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ibrahimhass
Ibrahimhass committed May 14, 2024
1 parent 6ab7b78 commit a823c75
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 10 deletions.
161 changes: 160 additions & 1 deletion example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1220,7 +1220,8 @@ class _HomePageState extends State<HomePage> {
),

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(
Expand All @@ -1244,6 +1245,7 @@ class _HomePageState extends State<HomePage> {
action: () {
print("tapped");
},
isScrollable: false,
menuItems: [
TUIMenuItem(
item: TUIMenuItemProperties(
Expand All @@ -1268,6 +1270,163 @@ class _HomePageState extends State<HomePage> {
},
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),
Expand Down
61 changes: 52 additions & 9 deletions lib/components/mobile_overlay_menu/mobile_overlay_menu.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,45 @@ class TUIMobileOverlayMenu extends StatelessWidget {
final double padding = 16;
final double verticalGap = 8;
final List<TUIMenuItem> 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) {
Expand All @@ -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;

Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit a823c75

Please sign in to comment.