feat: implement new toggle

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(),

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),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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;
+}