feat : Dropdown menu (#7)

* Create dropdown

* Add sizes

* create stoyrybook and add size

* Fix errrs and respond to comments

* Fix issues

* [automated commit] lint format and import sort

* Alter isLarge

* Fix spacing

* [automated commit] lint format and import sort

* Alter leading styles

* [automated commit] lint format and import sort

---------

Co-authored-by: Osman <AO3856@zebra.com>
Co-authored-by: github-actions <github-actions@github.com>

example/lib/home.dart

@@ -10,6 +10,7 @@ import 'package:zeta_example/pages/components/button_example.dart';
 import 'package:zeta_example/pages/components/checkbox_example.dart';
 import 'package:zeta_example/pages/components/chip_example.dart';
 import 'package:zeta_example/pages/components/dialpad_example.dart';
+import 'package:zeta_example/pages/components/dropdown_example.dart';
 import 'package:zeta_example/pages/components/list_item_example.dart';
 import 'package:zeta_example/pages/components/navigation_bar_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
@@ -42,6 +43,7 @@ final List<Component> components = [
   Component(ListItemExample.name, (context) => const ListItemExample()),
   Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
   Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
+  Component(DropdownExample.name, (context) => const DropdownExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
 ];

example/lib/pages/components/dropdown_example.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class DropdownExample extends StatefulWidget {
+  static const String name = "Dropdown";
+  const DropdownExample({super.key});
+
+  @override
+  State<DropdownExample> createState() => _DropdownExampleState();
+}
+
+class _DropdownExampleState extends State<DropdownExample> {
+  ZetaDropdownItem selectedItem = ZetaDropdownItem(
+    value: "Item 1",
+    leadingIcon: Icon(ZetaIcons.star_round),
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: "Dropdown",
+      child: Center(
+        child: SingleChildScrollView(
+          child: SizedBox(
+              width: 320,
+              child: Column(children: [
+                ZetaDropdown(
+                  leadingType: LeadingStyle.checkbox,
+                  onChange: (value) {
+                    setState(() {
+                      selectedItem = value;
+                    });
+                  },
+                  selectedItem: selectedItem,
+                  items: [
+                    ZetaDropdownItem(
+                      value: "Item 1",
+                      leadingIcon: Icon(ZetaIcons.star_round),
+                    ),
+                    ZetaDropdownItem(
+                      value: "Item 2",
+                      leadingIcon: Icon(ZetaIcons.star_half_round),
+                    ),
+                    ZetaDropdownItem(
+                      value: "Item 3",
+                    )
+                  ],
+                ),
+                Text('Selected item : ${selectedItem.value}')
+              ])),
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -13,6 +13,7 @@ import 'pages/components/button_widgetbook.dart';
 import 'pages/components/checkbox_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
 import 'pages/components/dial_pad_widgetbook.dart';
+import 'pages/components/dropdown_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
 import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
@@ -64,6 +65,7 @@ class HotReload extends StatelessWidget {
             ),
             WidgetbookUseCase(name: 'BreadCrumbs', builder: (context) => breadCrumbsUseCase(context)),
             WidgetbookUseCase(name: 'Banners', builder: (context) => bannerUseCase(context)),
+            WidgetbookUseCase(name: "Dropdown", builder: (context) => dropdownUseCase(context)),
             WidgetbookUseCase(name: 'In Page Banners', builder: (context) => inPageBannerUseCase(context)),
             WidgetbookUseCase(name: 'Accordion', builder: (context) => accordionUseCase(context)),
             WidgetbookComponent(

example/widgetbook/pages/components/dropdown_widgetbook.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: Center(
+        child: DropdownExample(context),
+      ),
+    );
+
+class DropdownExample extends StatefulWidget {
+  const DropdownExample(this.c);
+  final BuildContext c;
+
+  @override
+  State<DropdownExample> createState() => _DropdownExampleState();
+}
+
+class _DropdownExampleState extends State<DropdownExample> {
+  List<ZetaDropdownItem> _children = [
+    ZetaDropdownItem(
+      value: "Item 1",
+      leadingIcon: Icon(ZetaIcons.star_round),
+    ),
+    ZetaDropdownItem(
+      value: "Item 2",
+      leadingIcon: Icon(ZetaIcons.star_half_round),
+    ),
+    ZetaDropdownItem(
+      value: "Item 3",
+    )
+  ];
+
+  late ZetaDropdownItem selectedItem = ZetaDropdownItem(
+    value: "Item 1",
+    leadingIcon: Icon(ZetaIcons.star_round),
+  );
+
+  @override
+  Widget build(BuildContext _) {
+    return SingleChildScrollView(
+      child: SizedBox(
+          width: double.infinity,
+          child: Column(children: [
+            ZetaDropdown(
+              leadingType: widget.c.knobs.list(
+                label: "Checkbox type",
+                options: [
+                  LeadingStyle.none,
+                  LeadingStyle.checkbox,
+                  LeadingStyle.radio,
+                ],
+              ),
+              onChange: (value) {
+                setState(() {
+                  selectedItem = value;
+                });
+              },
+              selectedItem: selectedItem,
+              items: _children,
+              rounded: widget.c.knobs.boolean(label: "Rounded"),
+              isMinimized: widget.c.knobs.boolean(label: "Minimized"),
+            ),
+            Text('Selected item : ${selectedItem.value}')
+          ])),
+    );
+  }
+}

lib/src/components/breadcrumbs/breadcrumbs.dart

@@ -184,32 +184,29 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        statesController: controller,
-        onTap: widget.onPressed,
-        enableFeedback: false,
-        splashColor: Colors.transparent,
-        overlayColor: MaterialStateProperty.resolveWith((states) {
-          return Colors.transparent;
-        }),
-        child: Row(
-          children: [
-            if (widget.isSelected)
-              Icon(
-                widget.activeIcon ?? ZetaIcons.star_round,
-                color: getColor(controller.value, colors),
-              ),
-            const SizedBox(
-              width: ZetaSpacing.xs,
-            ),
-            Text(
-              widget.label,
-              style: TextStyle(color: getColor(controller.value, colors)),
+    return InkWell(
+      statesController: controller,
+      onTap: widget.onPressed,
+      enableFeedback: false,
+      splashColor: Colors.transparent,
+      overlayColor: MaterialStateProperty.resolveWith((states) {
+        return Colors.transparent;
+      }),
+      child: Row(
+        children: [
+          if (widget.isSelected)
+            Icon(
+              widget.activeIcon ?? ZetaIcons.star_round,
+              color: getColor(controller.value, colors),
             ),
-          ],
-        ),
+          const SizedBox(
+            width: ZetaSpacing.xs,
+          ),
+          Text(
+            widget.label,
+            style: TextStyle(color: getColor(controller.value, colors)),
+          ),
+        ],
       ),
     );
   }