Component ZetaSwitch

example/lib/home.dart

@@ -12,6 +12,7 @@ import 'package:zeta_example/pages/components/chip_example.dart';
 import 'package:zeta_example/pages/components/dialpad_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/components/switch_example.dart';
 import 'package:zeta_example/pages/theme/color_example.dart';
 import 'package:zeta_example/pages/components/password_input_example.dart';
 import 'package:zeta_example/pages/components/progress_example.dart';
@@ -44,6 +45,7 @@ final List<Component> components = [
   Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
   Component(ProgressExample.name, (context) => const ProgressExample()),
   Component(DialPadExample.name, (context) => const DialPadExample()),
+  Component(SwitchExample.name, (context) => const SwitchExample()),
 ];
 
 final List<Component> theme = [

example/lib/pages/components/switch_example.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:zeta_example/widgets.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class SwitchExample extends StatefulWidget {
+  static const String name = 'Switch';
+
+  const SwitchExample({Key? key}) : super(key: key);
+
+  @override
+  State<SwitchExample> createState() => _SwitchExampleState();
+}
+
+class _SwitchExampleState extends State<SwitchExample> {
+  bool? isOn = false;
+  bool isEnabled = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      name: 'Switch',
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: [
+                ZetaSwitch(
+                  value: isOn,
+                  onChanged: isEnabled ? (value) => setState(() => isOn = value) : null,
+                ),
+                ZetaButton(
+                  label: isEnabled ? 'Disable' : 'Enable',
+                  onPressed: () => setState(() => isEnabled = !isEnabled),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/widgetbook/main.dart

@@ -18,6 +18,7 @@ import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
+import 'pages/components/switch_widgetbook.dart';
 import 'pages/theme/color_widgetbook.dart';
 import 'pages/theme/radius_widgetbook.dart';
 import 'pages/theme/spacing_widgetbook.dart';
@@ -86,6 +87,7 @@ class HotReload extends StatelessWidget {
                 WidgetbookUseCase(name: 'Circle', builder: (context) => progressCircleUseCase(context))
               ],
             ),
+            WidgetbookUseCase(name: 'Switch', builder: (context) => switchUseCase(context)),
           ]..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(

example/widgetbook/pages/components/switch_widgetbook.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget switchUseCase(BuildContext context) {
+  bool? isOn = false;
+
+  return WidgetbookTestWidget(
+    widget: StatefulBuilder(
+      builder: (context, setState) {
+        ValueChanged<bool?>? onChanged = context.knobs.boolean(label: 'Enabled', initialValue: true)
+            ? (value) => setState(() => isOn = value)
+            : null;
+        return Padding(
+          padding: const EdgeInsets.all(ZetaSpacing.x5),
+          child: Column(
+            children: [
+              Text('Switch'),
+              ZetaSwitch(
+                value: isOn,
+                onChanged: onChanged,
+              ),
+              Text(isOn == true ? 'On' : 'Off'),
+            ],
+          ),
+        );
+      },
+    ),
+  );
+}