GSSelect component

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 Select",
+                  routePath: "/select-example",
+                ),
 
                 // // ===== Internal Testing Widgets =====
                 // const NavButton(

example/lib/routes/router.dart

@@ -3,6 +3,7 @@ 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/navigation_rail_example.dart';
+import 'package:gluestack_ui_example/widgets/components/widgets/select_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/slider_example.dart';
 import 'package:gluestack_ui_example/widgets/storybook/storybook.dart';
 import 'package:gluestack_ui_example/widgets/storybook/storybook_wrapper.dart';
@@ -198,6 +199,11 @@ final GoRouter router = GoRouter(
           path: "slider-example",
           builder: (context, state) => const SliderExample(),
         ),
+          GoRoute(
+          path: "select-example",
+          builder: (context, state) => const SelectExample(),
+        ),
+
 
         // Generate individual Storybook screens for every widget. This is referenced in docs website iframe.
         ...kStories.map(

example/lib/widgets/components/widgets/select_example.dart

@@ -0,0 +1,133 @@
+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';
+
+class SelectExample extends StatefulWidget {
+  const SelectExample({super.key});
+
+  @override
+  State<SelectExample> createState() => _SelectExampleState();
+}
+
+class _SelectExampleState extends State<SelectExample> {
+  final List dropdownSizeOptions = [
+    GSSelectSizes.$sm,
+    GSSelectSizes.$md,
+    GSSelectSizes.$lg,
+    GSSelectSizes.$xl,
+  ];
+  GSSelectSizes selectedSizeOption = GSSelectSizes.$md;
+
+  final List dropdownVariantOptions = [
+    GSSelectVariants.outline,
+    GSSelectVariants.rounded,
+    GSSelectVariants.underlined,
+  ];
+  GSSelectVariants selectedVariantOption = GSSelectVariants.outline;
+
+  void updateSizeSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedSizeOption = newOption;
+    });
+  }
+
+  void updateVariantSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedVariantOption = newOption;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var code = '''
+GSSelect(
+  content: GSSelectContent(
+    style: GSStyle(
+      width: 300,
+      height: 200,
+      padding: const EdgeInsets.symmetric(horizontal: 15),
+    ),
+    options: const [
+    'UX Research',
+    'Web Development',
+    'Cross Platform Development Process',
+    'UI Designing',
+    'Backend Development'
+  ],
+  disabledOptions: const ['UI Designing', 'Backend Development'],
+  ),
+  hintText: const GSSelectHeaderText("Select option"),
+  style: GSStyle(
+    width: 300,
+  ),
+  icon: const GSSelectIcon(
+    iconData: Icons.arrow_drop_down_outlined,
+  ),
+  size: $selectedSizeOption,
+  variant: $selectedVariantOption,
+),
+  ''';
+
+    return CustomGSLayout(
+      title: "Select",
+      style: GSStyle(
+        dark: GSStyle(bg: $GSColors.black),
+      ),
+      body: BaseLayout(
+        code: code,
+        component: GSSelect(
+          onClose: () {
+            setState(() {});
+          },
+          onOpen: () {},
+          onValueChange: (value) {},
+          content: GSSelectContent(
+            style: GSStyle(
+              width: 300,
+              height: 200,
+              padding: const EdgeInsets.symmetric(horizontal: 15),
+            ),
+            options: const [
+              'UX Research',
+              'Web Development',
+              'Cross Platform Development Process',
+              'UI Designing',
+              'Backend Development'
+            ],
+            disabledOptions: const ['UI Designing', 'Backend Development'],
+          ),
+          label: const GSSelectHeaderText("Select option"),
+          style: GSStyle(
+            width: 300,
+          ),
+          icon: const GSSelectIcon(
+            iconData: Icons.arrow_drop_down_outlined,
+          ),
+          size: selectedSizeOption,
+          variant: selectedVariantOption,
+        ),
+        controls: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            CustomDropDown(
+              title: "size",
+              dropdownOptions: dropdownSizeOptions,
+              selectedOption: selectedSizeOption,
+              onChanged: updateSizeSelectedOption,
+            ),
+            const SizedBox(height: 20),
+            CustomDropDown(
+              title: "variant",
+              dropdownOptions: dropdownVariantOptions,
+              selectedOption: selectedVariantOption,
+              onChanged: updateVariantSelectedOption,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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/select_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';
@@ -59,6 +60,7 @@ final List<StoryWidget> kStories = [
   ProgressStory(),
   RadioButtonStory(),
   ScrollStory(),
+  SelectStory(),
   SliderStory(),
   SpinnerStory(),
   StackStory(),

example/lib/widgets/storybook/widgets/select_story.dart

@@ -0,0 +1,50 @@
+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>> variantOptions =
+    generateEnumOptions(GSSelectVariants.values);
+
+final List<Option<int>> sizeOptions = generateEnumOptions(GSSelectSizes.values);
+
+final class SelectStory extends StoryWidget {
+  @override
+  Story createStoryWidget() {
+    return Story(
+      name: storyName,
+      builder: (context) => GSSelect(
+        style: GSStyle(
+            width: 300, padding: const EdgeInsets.symmetric(horizontal: 15)),
+        content: GSSelectContent(
+          style: GSStyle(
+              borderRadius: 6,
+              width: 300,
+              height: 200,
+              padding: const EdgeInsets.all(5)),
+          options: const [
+            'UX Research',
+            'Web Development',
+            'Cross Platform Development Process',
+            'UI Designing',
+            'Backend Development',
+          ],
+        ),
+        label: const GSSelectHeaderText("Select option"),
+        icon: const GSSelectIcon(
+          iconData: Icons.arrow_drop_down_outlined,
+        ),
+        variant: GSSelectVariants.values[context.knobs
+            .options(label: 'Variant', initial: 0, options: variantOptions)],
+        size: GSSelectSizes.values[context.knobs
+            .options(label: 'Size', initial: 0, options: sizeOptions)],
+      ),
+    );
+  }
+
+  @override
+  String get routePath => "select-preview";
+
+  @override
+  String get storyName => "Select";
+}

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_select/public.dart';

lib/src/provider/gluestack_provider.dart

@@ -1,3 +1,12 @@
+import 'package:gluestack_ui/src/theme/config/select/select.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_content.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_icon.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_item.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_selected_input.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_selection_header_text.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_text.dart';
+import 'package:gluestack_ui/src/theme/config/select/select_trigger.dart';
+
 import 'provider.dart';
 
 final getIt = GetIt.instance;
@@ -146,6 +155,15 @@ class GluestackCustomConfig {
   Map<String, dynamic>? sliderThumb;
   Map<String, dynamic>? sliderFilledTrack;
 
+  Map<String, dynamic>? select;
+  Map<String, dynamic>? selectTrigger;
+  Map<String, dynamic>? selectText;
+  Map<String, dynamic>? selectSelectionHeaderText;
+  Map<String, dynamic>? selectSelectedInput;
+  Map<String, dynamic>? selectIcon;
+  Map<String, dynamic>? selectContent;
+  Map<String, dynamic>? selectItem;
+
   //GS Layout
   Map<String, dynamic>? layout;
 
@@ -156,6 +174,17 @@ class GluestackCustomConfig {
     this.sliderTrack,
     this.sliderThumb,
     this.sliderFilledTrack,
+
+    // select
+
+    this.select,
+    this.selectContent,
+    this.selectItem,
+    this.selectIcon,
+    this.selectSelectionHeaderText,
+    this.selectSelectedInput,
+    this.selectText,
+    this.selectTrigger,
     //tabs
     this.tabs,
     this.tabsTab,
@@ -316,6 +345,18 @@ class GluestackCustomConfig {
     sliderThumb = mergeConfigs(sliderThumbData, sliderThumb);
     sliderFilledTrack = mergeConfigs(sliderFilledTrackData, sliderFilledTrack);
 
+    // select
+    select = mergeConfigs(selectData, select);
+    selectIcon = mergeConfigs(selectIconData, selectIcon);
+    selectItem = mergeConfigs(selectItemData, selectItem);
+    selectContent = mergeConfigs(selectContentData, selectContent);
+    selectSelectedInput =
+        mergeConfigs(selectSelectedInputData, selectSelectedInput);
+    selectTrigger = mergeConfigs(selectTriggerData, selectTrigger);
+    selectText = mergeConfigs(selectTextData, selectText);
+    selectSelectionHeaderText =
+        mergeConfigs(selectSelectionHeaderTextData, selectSelectionHeaderText);
+
     //tabs
     tabs = mergeConfigs(tabsData, tabs);
     tabsTab = mergeConfigs(tabsTabData, tabsTab);