GSModal

example/lib/home.dart

@@ -187,10 +187,14 @@ class _HomePageState extends State<HomePage> {
                   title: "GS Navigation Rail",
                   routePath: "/navigation-rail-preview",
                 ),
-                 const NavButton(
+                const NavButton(
                   title: "GS Slider",
                   routePath: "/slider-example",
                 ),
+                const NavButton(
+                  title: "GS Modal",
+                  routePath: "/modal-example",
+                ),
 
                 // // ===== Internal Testing Widgets =====
                 // const NavButton(

example/lib/routes/router.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:gluestack_ui_example/home.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/accordian_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/bottom_sheet_example.dart';
+import 'package:gluestack_ui_example/widgets/components/widgets/modal_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/navigation_rail_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/slider_example.dart';
 import 'package:gluestack_ui_example/widgets/storybook/storybook.dart';
@@ -198,6 +199,10 @@ final GoRouter router = GoRouter(
           path: "slider-example",
           builder: (context, state) => const SliderExample(),
         ),
+        GoRoute(
+          path: "modal-example",
+          builder: (context, state) => const ModalExample(),
+        ),
 
         // Generate individual Storybook screens for every widget. This is referenced in docs website iframe.
         ...kStories.map(

example/lib/widgets/components/widgets/modal_example.dart

@@ -0,0 +1,204 @@
+import 'package:flutter/material.dart';
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/base_layout.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/custom_gs_layout.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/drop_down.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/toggle.dart';
+
+class ModalExample extends StatefulWidget {
+  const ModalExample({super.key});
+
+  @override
+  State<ModalExample> createState() => _ModalExampleState();
+}
+
+class _ModalExampleState extends State<ModalExample> {
+  bool barrierDismissible = false;
+  bool isOpen = false;
+  bool showBackdrop = false;
+  final List dropdownSizeOptions = [
+    GSModalSizes.$xs,
+    GSModalSizes.$sm,
+    GSModalSizes.$md,
+    GSModalSizes.$lg,
+    GSModalSizes.$full,
+  ];
+  GSModalSizes selectedSizeOption = GSModalSizes.$md;
+
+  void updateSizeSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedSizeOption = newOption;
+    });
+  }
+
+  void updateBarrierDismissible(bool value) {
+    setState(() {
+      barrierDismissible = value;
+    });
+  }
+
+  void updateShowBackdrop(bool value) {
+    setState(() {
+      showBackdrop = value;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var code = '''
+GSModal(
+  isOpen: $isOpen,
+       barrierDismissible: $barrierDismissible,
+            showBackdrop: $showBackdrop,
+  size: $selectedSizeOption,
+  content: GSModalContent(
+    header: GSModalHeader(
+      closeButton: GSModalCloseButton(
+        icon: GSIcon(icon: Icons.close),
+      ),
+      child: GSText(
+        text: "Invite your team",
+        style: GSStyle(
+          textStyle: TextStyle(
+            color: GSTheme.of(context).background900,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      ),
+    ),
+    body: GSModalBody(
+      child: GSText(
+        text: "Elevate user interactions with our versatile modals. Seamlessly integrate notifications, forms, and media displays. Make an impact effortlessly.",
+      ),
+    ),
+    footer: GSModalFooter(
+      child: GSButtonGroup(
+        buttons: [
+          GSButton(
+            action: GSButtonActions.primary,
+            variant: GSButtonVariants.outline,
+            child: GSText(
+              text: "Cancel",
+            ),
+            onPressed: () {
+              setState(() {
+                isOpen = false;
+              });
+            },
+          ),
+          GSButton(
+            action: GSButtonActions.primary,
+            variant: GSButtonVariants.solid,
+            child: GSText(
+              text: "Explore",
+            ),
+            onPressed: () {
+              setState(() {
+                isOpen = false;
+              });
+            },
+          ),
+        ],
+      ),
+    ),
+  ),
+  child: GSBadge(
+    text: GSBadgeText("Show Modal"),
+  ),
+)
+''';
+
+    return CustomGSLayout(
+      title: "Modal",
+      style: GSStyle(
+        dark: GSStyle(bg: $GSColors.black),
+      ),
+      body: BaseLayout(
+        code: code,
+        component: GSModal(
+            onClose: () {
+              setState(() {});
+            },
+            barrierDismissible: barrierDismissible,
+            showBackdrop: showBackdrop,
+            isOpen: isOpen,
+            size: selectedSizeOption,
+            content: GSModalContent(
+              header: GSModalHeader(
+                closeButton: const GSModalCloseButton(
+                  icon: GSIcon(icon: Icons.close),
+                ),
+                child: GSText(
+                  text: "Invite your team",
+                  style: GSStyle(
+                      textStyle: TextStyle(
+                          color: GSTheme.of(context).background900,
+                          fontWeight: FontWeight.bold)),
+                ),
+              ),
+              body: const GSModalBody(
+                child: GSText(
+                  text:
+                      "Elevate user interactions with our versatile modals. Seamlessly integrate notifications, forms, and media displays. Make an impact effortlessly.",
+                ),
+              ),
+              footer: GSModalFooter(
+                child: GSButtonGroup(
+                  buttons: [
+                    GSButton(
+                        action: GSButtonActions.primary,
+                        variant: GSButtonVariants.outline,
+                        child: const GSText(
+                          text: "Cancel",
+                        ),
+                        onPressed: () {
+                          setState(() {
+                            isOpen = false;
+                          });
+                        }),
+                    GSButton(
+                        action: GSButtonActions.primary,
+                        variant: GSButtonVariants.solid,
+                        child: const GSText(
+                          text: "Explore",
+                        ),
+                        onPressed: () {
+                          setState(() {
+                            isOpen = false;
+                          });
+                        }),
+                  ],
+                ),
+              ),
+            ),
+            child: const GSBadge(
+              text: GSBadgeText("Show Modal"),
+            )),
+        controls: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            CustomDropDown(
+              title: "size",
+              dropdownOptions: dropdownSizeOptions,
+              selectedOption: selectedSizeOption,
+              onChanged: updateSizeSelectedOption,
+            ),
+            const SizedBox(height: 20),
+            CustomToggle(
+              title: "barrierDismissible",
+              value: barrierDismissible,
+              onToggle: updateBarrierDismissible,
+            ),
+            const SizedBox(height: 20),
+            CustomToggle(
+              title: "showBackdrop",
+              value: showBackdrop,
+              onToggle: updateShowBackdrop,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/widgets/storybook/widgets/modal_story.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'base_story_widget.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+final List<Option<int>> sizeOptions = generateEnumOptions(GSModalSizes.values);
+
+final class ModalStory extends StoryWidget {
+  @override
+  Story createStoryWidget() {
+    return Story(
+        name: storyName,
+        builder: (context) => GSModal(
+            size: GSModalSizes.values[context.knobs
+                .options(label: 'Size', initial: 0, options: sizeOptions)],
+            barrierDismissible: context.knobs
+                .boolean(label: "barrierDismissible", initial: true),
+            showBackdrop:
+                context.knobs.boolean(label: "showBackdrop", initial: true),
+            content: GSModalContent(
+              header: GSModalHeader(
+                closeButton: const GSModalCloseButton(
+                  icon: GSIcon(icon: Icons.close),
+                ),
+                style: GSStyle(
+                    textStyle: TextStyle(
+                        color: GSTheme.of(context).background900,
+                        fontWeight: FontWeight.bold)),
+                child: const GSText(
+                  text: "Invite your team",
+                ),
+              ),
+              body: const GSModalBody(
+                child: GSText(
+                  text:
+                      "Elevate user interactions with our versatile modals. Seamlessly integrate notifications, forms, and media displays. Make an impact effortlessly.",
+                ),
+              ),
+              footer: GSModalFooter(
+                child: GSButtonGroup(
+                  buttons: [
+                    GSButton(
+                        action: GSButtonActions.primary,
+                        variant: GSButtonVariants.outline,
+                        child: const GSText(
+                          text: "Cancel",
+                        ),
+                        onPressed: () {}),
+                    GSButton(
+                        action: GSButtonActions.primary,
+                        variant: GSButtonVariants.solid,
+                        child: const GSText(
+                          text: "Explore",
+                        ),
+                        onPressed: () {}),
+                  ],
+                ),
+              ),
+            ),
+            child: const GSBadge(
+              text: GSBadgeText("Show Modal"),
+            )));
+  }
+
+  @override
+  String get routePath => "modal-preview";
+
+  @override
+  String get storyName => "Modal";
+}

example/lib/widgets/storybook/widgets/public.dart

@@ -1,4 +1,5 @@
 import 'package:gluestack_ui_example/widgets/storybook/widgets/header_story.dart';
+import 'package:gluestack_ui_example/widgets/storybook/widgets/modal_story.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/slider_story.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/tab_story.dart';
 import 'alert_dialog_story.dart';
@@ -68,6 +69,7 @@ final List<StoryWidget> kStories = [
   ToastStory(),
   VStackStory(),
   HeaderStory(),
+  ModalStory(),
   ModalBottomSheetStory(),
   NavigationRailStory(),
   StepperStory(),

lib/gluestack_ui.dart

@@ -47,3 +47,4 @@ export 'src/widgets/gs_tabs/public.dart';
 export 'src/widgets/gs_layout/public.dart';
 export 'src/widgets/gs_header/public.dart';
 export 'src/widgets/gs_slider/public.dart';
+export 'src/widgets/gs_modal/public.dart';

lib/src/provider/gluestack_provider.dart

@@ -146,6 +146,15 @@ class GluestackCustomConfig {
   Map<String, dynamic>? sliderThumb;
   Map<String, dynamic>? sliderFilledTrack;
 
+  //modal
+  Map<String, dynamic>? modal;
+  Map<String, dynamic>? modalHeader;
+  Map<String, dynamic>? modalFooter;
+  Map<String, dynamic>? modalContent;
+  Map<String, dynamic>? modalCloseButton;
+  Map<String, dynamic>? modalBody;
+  Map<String, dynamic>? modalBackdrop;
+
   //GS Layout
   Map<String, dynamic>? layout;
 
@@ -156,6 +165,16 @@ class GluestackCustomConfig {
     this.sliderTrack,
     this.sliderThumb,
     this.sliderFilledTrack,
+
+    // modal
+
+    this.modal,
+    this.modalBackdrop,
+    this.modalBody,
+    this.modalCloseButton,
+    this.modalContent,
+    this.modalFooter,
+    this.modalHeader,
     //tabs
     this.tabs,
     this.tabsTab,
@@ -316,6 +335,16 @@ class GluestackCustomConfig {
     sliderThumb = mergeConfigs(sliderThumbData, sliderThumb);
     sliderFilledTrack = mergeConfigs(sliderFilledTrackData, sliderFilledTrack);
 
+    // modal
+
+    modal = mergeConfigs(modalData, modal);
+    modalBackdrop = mergeConfigs(modalBackdropData, modalBackdrop);
+    modalBody = mergeConfigs(modalBodyData, modalBody);
+    modalFooter = mergeConfigs(modalFooterData, modalFooter);
+    modalHeader = mergeConfigs(modalHeaderData, modalHeader);
+    modalContent = mergeConfigs(modalContentData, modalContent);
+    modalCloseButton = mergeConfigs(modalCloseButtonData, modalCloseButton);
+
     //tabs
     tabs = mergeConfigs(tabsData, tabs);
     tabsTab = mergeConfigs(tabsTabData, tabsTab);

lib/src/provider/provider.dart

@@ -84,3 +84,10 @@ export 'package:gluestack_ui/src/theme/config/slider/slider_track.dart';
 export 'package:gluestack_ui/src/theme/config/slider/slider_thumb.dart';
 export 'package:gluestack_ui/src/theme/config/slider/slider_thumb_interaction.dart';
 export 'package:gluestack_ui/src/theme/config/slider/slider_filled_track.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal_backdrop.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal_body.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal_close_button.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal_content.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal_footer.dart';
+export 'package:gluestack_ui/src/theme/config/modal/modal_header.dart';