Add animations to segmented_buttons.dart

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(
+            return Stack(
-              crossAxisAlignment: CrossAxisAlignment.center,
+              alignment: Alignment.centerLeft,
               children: [
-                if (isSelected[index])
+                AnimatedOpacity(
-                  Icon(
+                  duration: const Duration(milliseconds: 200),
-                    Icons.check,
+                  opacity: isSelected[index] ? 1 : 0,
-                    size: 18,
+                  child: AnimatedScale(
-                    color: Theme.of(context).colorScheme.onSecondaryContainer,
+                    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,
                 ),
               ],
             );