From 3079b4bcc5f7565c277a23bc55e6f65e6364c9c7 Mon Sep 17 00:00:00 2001
From: Inex Code <inex.code@selfprivacy.org>
Date: Fri, 16 Sep 2022 01:28:10 +0300
Subject: [PATCH] Add animations to segmented_buttons.dart

---
 .../brand_button/segmented_buttons.dart       | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/lib/ui/components/brand_button/segmented_buttons.dart b/lib/ui/components/brand_button/segmented_buttons.dart
index 444aa906..8ddccb5b 100644
--- a/lib/ui/components/brand_button/segmented_buttons.dart
+++ b/lib/ui/components/brand_button/segmented_buttons.dart
@@ -30,19 +30,34 @@ class SegmentedButtons extends StatelessWidget {
           children: titles.asMap().entries.map((final entry) {
             final index = entry.key;
             final title = entry.value;
-            return Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
+            return Stack(
+              alignment: Alignment.centerLeft,
               children: [
-                if (isSelected[index])
-                  Icon(
-                    Icons.check,
-                    size: 18,
-                    color: Theme.of(context).colorScheme.onSecondaryContainer,
+                AnimatedOpacity(
+                  duration: const Duration(milliseconds: 200),
+                  opacity: isSelected[index] ? 1 : 0,
+                  child: AnimatedScale(
+                    duration: const Duration(milliseconds: 200),
+                    curve: Curves.easeInOut,
+                    alignment: Alignment.centerLeft,
+                    scale: isSelected[index] ? 1 : 0,
+                    child: Icon(
+                      Icons.check,
+                      size: 18,
+                      color: Theme.of(context).colorScheme.onSecondaryContainer,
+                    ),
+                  ),
+                ),
+                AnimatedPadding(
+                  padding: isSelected[index]
+                      ? const EdgeInsets.only(left: 24)
+                      : EdgeInsets.zero,
+                  duration: const Duration(milliseconds: 200),
+                  curve: Curves.easeInOut,
+                  child: Text(
+                    title,
+                    style: Theme.of(context).textTheme.labelLarge,
                   ),
-                if (isSelected[index]) const SizedBox(width: 8),
-                Text(
-                  title,
-                  style: Theme.of(context).textTheme.labelLarge,
                 ),
               ],
             );