feat: improve animations

matthiasn · Jun 16, 2024 · 694903f · 694903f
1 parent 9a2862d
commit 694903f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 22 deletions.
diff --git a/lib/features/tasks/ui/checkbox_item_widget.dart b/lib/features/tasks/ui/checkbox_item_widget.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:lotti/features/tasks/ui/consts.dart';
 import 'package:lotti/features/tasks/ui/title_text_field.dart';
 
 // ignore: avoid_positional_boolean_parameters
@@ -42,22 +43,30 @@ class _CheckboxItemWidgetState extends State<CheckboxItemWidget> {
             _isEditing = true;
           });
         },
-        child: _isEditing
-            ? TitleTextField(
-                initialValue: widget.title,
-                onSave: (title) {
-                  debugPrint('Saved: $title');
-                  setState(() {
-                    _isEditing = false;
-                  });
-                },
-                onClear: () {
-                  setState(() {
-                    _isEditing = false;
-                  });
-                },
-              )
-            : Text(widget.title),
+        child: AnimatedCrossFade(
+          duration: checklistCrossFadeDuration,
+          firstChild: TitleTextField(
+            initialValue: widget.title,
+            onSave: (title) {
+              debugPrint('Saved: $title');
+              setState(() {
+                _isEditing = false;
+              });
+            },
+            resetToInitialValue: true,
+            onClear: () {
+              setState(() {
+                _isEditing = false;
+              });
+            },
+          ),
+          secondChild: SizedBox(
+            width: double.infinity,
+            child: Text(widget.title),
+          ),
+          crossFadeState:
+              _isEditing ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+        ),
       ),
       value: _isChecked,
       controlAffinity: ListTileControlAffinity.leading,

diff --git a/lib/features/tasks/ui/checklist_widget.dart b/lib/features/tasks/ui/checklist_widget.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:lotti/features/tasks/ui/checkbox_item_wrapper.dart';
+import 'package:lotti/features/tasks/ui/consts.dart';
 import 'package:lotti/features/tasks/ui/title_text_field.dart';
 
 class ChecklistWidget extends StatefulWidget {
@@ -21,7 +22,7 @@ class _ChecklistWidgetState extends State<ChecklistWidget> {
   Widget build(BuildContext context) {
     return ExpansionTile(
       title: AnimatedCrossFade(
-        duration: const Duration(milliseconds: 200),
+        duration: checklistCrossFadeDuration,
         firstChild: Padding(
           padding: const EdgeInsets.symmetric(vertical: 10),
           child: TitleTextField(

diff --git a/lib/features/tasks/ui/consts.dart b/lib/features/tasks/ui/consts.dart
@@ -0,0 +1,2 @@
+const checklistCrossFadeDuration = Duration(milliseconds: 100);
+const checklistActionIconFadeDuration = Duration(milliseconds: 300);
diff --git a/lib/features/tasks/ui/title_text_field.dart b/lib/features/tasks/ui/title_text_field.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:lotti/features/tasks/ui/consts.dart';
 import 'package:lotti/l10n/app_localizations_context.dart';
 import 'package:lotti/themes/theme.dart';
 
@@ -89,7 +90,7 @@ class _TitleTextFieldState extends State<TitleTextField> {
             AnimatedOpacity(
               curve: Curves.easeInOutQuint,
               opacity: _dirty ? 1.0 : 0.0,
-              duration: const Duration(milliseconds: 400),
+              duration: checklistActionIconFadeDuration,
               child: IconButton(
                 icon: const Icon(
                   Icons.check_circle,
@@ -102,7 +103,7 @@ class _TitleTextFieldState extends State<TitleTextField> {
             AnimatedOpacity(
               curve: Curves.easeInOutQuint,
               opacity: _showClearButton ? 1.0 : 0.0,
-              duration: const Duration(milliseconds: 400),
+              duration: checklistActionIconFadeDuration,
               child: IconButton(
                 icon: const Icon(
                   Icons.cancel_outlined,

diff --git a/lib/widgetbook.dart b/lib/widgetbook.dart
@@ -64,9 +64,6 @@ class WidgetbookApp extends StatelessWidget {
                     title: 'Create PR',
                     isChecked: true,
                     onChanged: (checked) {},
-                    onEdit: () {
-                      debugPrint('Edit');
-                    },
                   ),
                 ),
                 WidgetbookUseCase(