From 02e3e7c49adce11959df93aac58aed35901ecb46 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com>
Date: Mon, 25 Jul 2022 13:58:03 -0300
Subject: [PATCH] feat: implement new toggle

---
 .../widgets/settings_appearance_view.dart     |  6 ++-
 .../presentation/widgets/toggle/toggle.dart   | 52 +++++++++++++++++++
 .../widgets/toggle/toggle_style.dart          | 35 +++++++++++++
 3 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart
 create mode 100644 frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart

diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
index e03f1fbc3b..85b78ae3b0 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@@ -1,10 +1,13 @@
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
+import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../widgets/toggle/toggle.dart';
+
 class SettingsAppearanceView extends StatelessWidget {
   const SettingsAppearanceView({Key? key}) : super(key: key);
 
@@ -25,11 +28,12 @@ class SettingsAppearanceView extends StatelessWidget {
                   fontWeight: FontWeight.w500,
                 ),
               ),
-              Switch(
+              Toggle(
                 value: theme.isDark,
                 onChanged: (val) {
                   context.read<AppearanceSettingModel>().swapTheme();
                 },
+                style: ToggleStyle.big(theme),
               ),
               Text(
                 LocaleKeys.settings_appearance_darkLabel.tr(),
diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart
new file mode 100644
index 0000000000..9b0d8de891
--- /dev/null
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart
@@ -0,0 +1,52 @@
+import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
+import 'package:flutter/widgets.dart';
+
+class Toggle extends StatelessWidget {
+  final ToggleStyle style;
+  final bool value;
+  final void Function(bool) onChanged;
+  final EdgeInsets padding;
+
+  const Toggle({
+    Key? key,
+    required this.value,
+    required this.onChanged,
+    required this.style,
+    this.padding = const EdgeInsets.all(8.0),
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: (() => onChanged(value)),
+      child: Padding(
+        padding: padding,
+        child: Stack(
+          children: [
+            Container(
+              height: style.height,
+              width: style.width,
+              decoration: BoxDecoration(
+                color: style.backgroundColor,
+                borderRadius: BorderRadius.circular(style.height / 2),
+              ),
+            ),
+            AnimatedPositioned(
+              duration: const Duration(milliseconds: 150),
+              top: (style.height - style.thumbRadius) / 2,
+              left: value ? 1 : style.width - style.thumbRadius - 1,
+              child: Container(
+                height: style.thumbRadius,
+                width: style.thumbRadius,
+                decoration: BoxDecoration(
+                  color: style.thumbColor,
+                  borderRadius: BorderRadius.circular(style.thumbRadius / 2),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart
new file mode 100644
index 0000000000..f20344ccf8
--- /dev/null
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart
@@ -0,0 +1,35 @@
+import 'package:flowy_infra/theme.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter/widgets.dart';
+
+class ToggleStyle {
+  final double height;
+  final double width;
+
+  final double thumbRadius;
+
+  final Color backgroundColor;
+  final Color thumbColor;
+
+  ToggleStyle({
+    required this.height,
+    required this.width,
+    required this.thumbRadius,
+    required this.backgroundColor,
+    required this.thumbColor,
+  });
+
+  ToggleStyle.big(AppTheme theme)
+      : height = 16,
+        width = 27,
+        thumbRadius = 14,
+        backgroundColor = theme.main1,
+        thumbColor = theme.surface;
+
+  ToggleStyle.small(AppTheme theme)
+      : height = 10,
+        width = 16,
+        thumbRadius = 8,
+        backgroundColor = theme.main1,
+        thumbColor = theme.surface;
+}