refactor: Update custom switch to have Cosmos specific gradient (#276)

Author: wal33d006

packages/cosmos_ui_components/assets/images/2.0x/toggle.png

@@ -19,7 +19,7 @@ class CosmosQrImage extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = CosmosTheme.of(context);
     return ClipRRect(
-      borderRadius: borderRadius ?? BorderRadius.circular(theme.radiusL),
+      borderRadius: borderRadius ?? theme.borderRadiusL,
       child: QrImage(
         padding: padding,
         data: data,

packages/cosmos_ui_components/assets/images/3.0x/toggle.png

@@ -1,38 +1,66 @@
-import 'package:cosmos_ui_components/cosmos_theme.dart';
+import 'package:cosmos_ui_components/cosmos_ui_components.dart';
+import 'package:cosmos_ui_components/utils/global_constants.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 class CosmosSwitch extends StatelessWidget {
   const CosmosSwitch({
     required this.checked,
+    this.toggleAsset,
+    this.checkedGradientStops = const [0, 0.5866, 1],
+    this.gradientColors = GlobalConstants.cosmosGradientColors,
+    this.package,
     this.onChanged,
     Key? key,
   }) : super(key: key);
 
   final bool checked;
   final ValueChanged<bool>? onChanged;
+  final String? toggleAsset;
+  final List<double> checkedGradientStops;
+  final List<Color> gradientColors;
+  final String? package;
 
   @override
   Widget build(BuildContext context) {
-    final theme = CosmosTheme.of(context);
-    return Transform.scale(
-      scale: 0.9, // so that the border appears closer to the switch
-      child: Container(
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(1000),
-          border: Border.all(
-            color: checked ? Colors.transparent : theme.colors.text.withOpacity(0.1),
-          ),
-        ),
+    return TweenAnimationBuilder<Alignment>(
+      duration: const Duration(milliseconds: 200),
+      tween: AlignmentTween(
+        begin: checked ? Alignment.centerLeft : Alignment.centerRight,
+        end: checked ? Alignment.centerRight : Alignment.centerLeft,
+      ),
+      builder: (context, value, child) => GestureDetector(
+        onTap: () => onChanged!(!checked),
         child: Transform.scale(
-          scale: 1.1, // so that the border appears closer to the switch
-          child: CupertinoSwitch(
-            value: checked,
-            onChanged: onChanged,
-            activeColor: theme.colors.link,
-            thumbColor: checked ? theme.colors.background : theme.colors.text,
-            trackColor: theme.colors.background,
+          scale: 0.9,
+          child: Container(
+            width: 50,
+            height: 28,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(30),
+              gradient: checked
+                  ? LinearGradient(
+                      stops: checkedGradientStops,
+                      colors: gradientColors,
+                    )
+                  : null,
+              color: checked ? null : CosmosTheme.of(context).colors.text,
+            ),
+            child: Transform.scale(
+              scale: 1.1,
+              child: Align(
+                alignment: value,
+                child: SizedBox(
+                  width: 30,
+                  height: 30,
+                  child: Image.asset(
+                    toggleAsset ?? 'assets/images/toggle.png',
+                    package: package ?? (toggleAsset == null ? packageName : null),
+                  ),
+                ),
+              ),
+            ),
           ),
         ),
       ),
@@ -43,7 +71,11 @@ class CosmosSwitch extends StatelessWidget {
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
+      ..add(DiagnosticsProperty<bool>('checked', checked))
       ..add(ObjectFlagProperty<ValueChanged<bool>?>.has('onChanged', onChanged))
-      ..add(DiagnosticsProperty<bool>('checked', checked));
+      ..add(StringProperty('toggleAsset', toggleAsset))
+      ..add(IterableProperty<double>('checkedGradientStops', checkedGradientStops))
+      ..add(IterableProperty<Color>('gradientColors', gradientColors))
+      ..add(StringProperty('package', package));
   }
 }

packages/cosmos_ui_components/assets/images/toggle.png

@@ -1,3 +1,11 @@
+import 'package:flutter/material.dart';
+
 abstract class GlobalConstants {
   static const double defaultButtonHeight = 50;
+
+  static const List<Color> cosmosGradientColors = [
+    Color(0xFF64DBFC),
+    Color(0xFF30FFDF),
+    Color(0xFFFFFE39),
+  ];
 }