add animation to send button colors

commetchat · Aug 3, 2024 · f156499 · f156499
1 parent 771dd19
commit f156499
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/commet/lib/ui/molecules/message_input.dart b/commet/lib/ui/molecules/message_input.dart
@@ -527,16 +527,39 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget sendMessageButton() {
+    bool canSend = controller.text.isNotEmpty;
+
+    Color col = canSend
+        ? Theme.of(context).colorScheme.primary
+        : Theme.of(context).colorScheme.secondaryContainer;
+
+    Color iconCol = canSend
+        ? Theme.of(context).colorScheme.onPrimary
+        : Theme.of(context).colorScheme.onSecondaryContainer;
+
+    double targetValue = canSend ? 1 : 0;
     return Padding(
         padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
-        child: SizedBox(
-            width: widget.size,
-            height: widget.size,
-            child: tiamat.CircleButton(
-              icon: Icons.send,
-              radius: widget.size * widget.iconScale,
-              onPressed: sendMessage,
-            )));
+        child: TweenAnimationBuilder(
+          tween: Tween<double>(begin: 0, end: targetValue),
+          duration: Durations.medium1,
+          builder: (context, value, child) {
+            return SizedBox(
+                width: widget.size,
+                height: widget.size,
+                child: tiamat.CircleButton(
+                  icon: Icons.send,
+                  radius: widget.size * widget.iconScale,
+                  onPressed: sendMessage,
+                  color: Color.lerp(
+                      Theme.of(context).colorScheme.primary.withAlpha(0),
+                      Theme.of(context).colorScheme.primary,
+                      value),
+                  iconColor: Color.lerp(Theme.of(context).colorScheme.secondary,
+                      Theme.of(context).colorScheme.onPrimary, value),
+                ));
+          },
+        ));
   }
 
   Widget toggleEmojiButton() {

diff --git a/tiamat/lib/atoms/circle_button.dart b/tiamat/lib/atoms/circle_button.dart
@@ -13,10 +13,18 @@ Widget wbcircleButton(BuildContext context) {
 }
 
 class CircleButton extends StatelessWidget {
-  const CircleButton({super.key, this.radius = 15, this.icon, this.onPressed});
+  const CircleButton(
+      {super.key,
+      this.radius = 15,
+      this.icon,
+      this.onPressed,
+      this.color,
+      this.iconColor});
   final double radius;
   final Function? onPressed;
   final IconData? icon;
+  final Color? color;
+  final Color? iconColor;
   @override
   Widget build(BuildContext context) {
     var shadows = Theme.of(context).extension<ShadowSettings>();
@@ -26,7 +34,7 @@ class CircleButton extends StatelessWidget {
       clipBehavior: Clip.antiAlias,
       child: ClipOval(
         child: Material(
-          color: Theme.of(context).colorScheme.secondaryContainer,
+          color: color ?? Theme.of(context).colorScheme.secondaryContainer,
           borderRadius: BorderRadius.circular(radius),
           child: InkWell(
             splashColor: Theme.of(context).highlightColor, // Splash color
@@ -40,7 +48,8 @@ class CircleButton extends StatelessWidget {
                     ? Align(
                         alignment: Alignment.center,
                         child: Icon(
-                          color: Theme.of(context).colorScheme.secondary,
+                          color: iconColor ??
+                              Theme.of(context).colorScheme.secondary,
                           icon,
                           size: radius,
                         ))