Fix: Size transition in list

canopas · Jan 16, 2024 · a3a2960 · a3a2960
1 parent bfce706
commit a3a2960
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 88 deletions.
diff --git a/example/lib/home_page.dart b/example/lib/home_page.dart
@@ -161,16 +161,31 @@ class _HomePageState extends State<HomePage> {
                               key: Key(list[index].name),
                               index: list[index].index);
                         },
-                       insertItemBuilder: (Widget child, Animation<double> animation){
-                          return SizeTransition(
-                            axis: Axis.vertical,
-                            axisAlignment: 0.0,
-                            sizeFactor: animation,
-                            child: child,);
-                       },
+                        insertItemBuilder:
+                            (Widget child, Animation<double> animation) {
+                          return Align(
+                            child: SizeTransition(
+                              axis: Axis.horizontal,
+                              axisAlignment: 0.0,
+                              sizeFactor: animation,
+                              child: child,
+                            ),
+                          );
+                        },
+                        removeItemBuilder:
+                            (Widget child, Animation<double> animation) {
+                          return Align(
+                            child: SizeTransition(
+                              axis: Axis.horizontal,
+                              axisAlignment: 0.0,
+                              sizeFactor: animation,
+                              child: child,
+                            ),
+                          );
+                        },
                         enterTransition: animations,
                         exitTransition: animations,
-                        insertDuration: const Duration(seconds: 3),
+                        insertDuration: const Duration(milliseconds: 300),
                         removeDuration: const Duration(milliseconds: 300),
                         onReorder: (int oldIndex, int newIndex) {
                           setState(() {
@@ -189,27 +204,19 @@ class _HomePageState extends State<HomePage> {
                               key: Key(list[index].name),
                               index: list[index].index);
                         },
-                      // insertItemBuilder: (Widget child, Animation<double> animation){
-                      //    return SizeTransition(
-                      //      axis: Axis.vertical,
-                      //      sizeFactor: animation,
-                      //      child: child,);
-                      //   },
-                  //    removeItemBuilder: (Widget child, Animation<double> animation){
-                  //        return SizeTransition(
-                  //          axis: Axis.vertical,
-                  //         sizeFactor: animation,
-                  //         child: child,);
-                  // },
-                        // onReorder: (int oldIndex, int newIndex) {
-                        //   setState(() {
-                        //     final User user = list.removeAt(oldIndex);
-                        //     list.insert(newIndex, user);
-                        //   });
-                        // },
+
+                        // Animation builder for custom animation
+
+                        //           insertItemBuilder: (Widget child, Animation<double> animation){
+                        //              return ScaleTransition(
+                        //                scale: animation,
+                        //                child: child,
+                        //              );
+                        //             },
+
                         enterTransition: animations,
                         exitTransition: animations,
-                        insertDuration: const Duration(seconds: 3),
+                        insertDuration: const Duration(milliseconds: 300),
                         removeDuration: const Duration(milliseconds: 300),
                       ),
               ),
@@ -224,6 +231,7 @@ enum AnimationType {
   flipInY,
   flipInX,
   landing,
+  size,
   scaleIn,
   scaleInTop,
   scaleInBottom,
@@ -246,6 +254,8 @@ class AnimationProvider {
         return FlipInX();
       case (AnimationType.landing):
         return Landing();
+      case (AnimationType.size):
+        return SizeAnimation();
       case (AnimationType.scaleIn):
         return ScaleIn();
       case (AnimationType.scaleInTop):

diff --git a/example/lib/utils/item_tile.dart b/example/lib/utils/item_tile.dart
@@ -22,7 +22,7 @@ class ItemTile extends StatelessWidget {
         child: Column(
           children: [
             Container(
-              height: index%2 ==0?60:200,
+              height: 60,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(10),

diff --git a/lib/src/animated_gridview.dart b/lib/src/animated_gridview.dart
@@ -1,7 +1,5 @@
-import 'package:animated_reorderable_list/src/builder/motion_animated_builder.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
-
 import '../../animated_reorderable_list.dart';
 import 'builder/motion_list_base.dart';
 import 'builder/motion_list_impl.dart';

diff --git a/lib/src/animated_listview.dart b/lib/src/animated_listview.dart
@@ -1,8 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
 import 'package:animated_reorderable_list/animated_reorderable_list.dart';
-
-import 'builder/motion_animated_builder.dart';
 import 'builder/motion_list_base.dart';
 import 'builder/motion_list_impl.dart';
 

diff --git a/lib/src/animated_reorderable_gridview.dart b/lib/src/animated_reorderable_gridview.dart
@@ -2,7 +2,6 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
 
 import '../../animated_reorderable_list.dart';
-import 'builder/motion_animated_builder.dart';
 import 'builder/motion_list_base.dart';
 import 'builder/motion_list_impl.dart';
 

diff --git a/lib/src/animated_reorderable_listview.dart b/lib/src/animated_reorderable_listview.dart
@@ -1,8 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
 import 'package:animated_reorderable_list/animated_reorderable_list.dart';
-
-import 'builder/motion_animated_builder.dart';
 import 'builder/motion_list_base.dart';
 import 'builder/motion_list_impl.dart';
 

diff --git a/lib/src/animation/animation.dart b/lib/src/animation/animation.dart
@@ -11,4 +11,4 @@ export 'slide_in_down.dart';
 export 'slide_in_left.dart';
 export 'slide_in_right.dart';
 export 'slide_in_up.dart';
-export 'size_transition.dart';
+export 'size_animation.dart';
diff --git a/lib/src/animation/provider/animation_type.dart b/lib/src/animation/provider/animation_type.dart
@@ -3,6 +3,7 @@ enum AnimationType {
   flipInY,
   flipInX,
   landing,
+  size,
   scaleIn,
   scaleInTop,
   scaleInBottom,

diff --git a/lib/src/animation/size_animation.dart b/lib/src/animation/size_animation.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/cupertino.dart';
+import '../../animated_reorderable_list.dart';
+
+class SizeAnimation extends AnimationEffect<double> {
+  static const double beginValue = 0.0;
+  static const double endValue = 1.0;
+  static const double alignmentValue = 0.0;
+  final double? begin;
+  final double? end;
+  final Axis? axis;
+ final  double? axisAlignment;
+
+  SizeAnimation({super.delay, super.duration, super.curve,
+    this.begin, this.end,
+    this.axis,
+    this.axisAlignment});
+
+  @override
+  Widget build(BuildContext context, Widget child, Animation<double> animation,
+      EffectEntry entry) {
+    final Animation<double> sizeFactor =
+    buildAnimation(entry, begin: begin ?? beginValue, end: end ?? endValue)
+        .animate(animation);
+    return Align(
+      child: SizeTransition(
+        sizeFactor: sizeFactor,
+        axis: axis??Axis.horizontal,
+        axisAlignment: axisAlignment?? alignmentValue,
+        child: child,
+      ),
+    );
+  }
+}
diff --git a/lib/src/animation/size_transition.dart b/lib/src/animation/size_transition.dart
diff --git a/lib/src/builder/motion_animated_builder.dart b/lib/src/builder/motion_animated_builder.dart
@@ -567,7 +567,7 @@ class MotionBuilderState extends State<MotionBuilder>
           continue;
         } else {
           updatedChildrenMap[entry.key - 1] =
-              childrenMap[entry.key]!.copyWith(index: entry.key - 1);
+              childrenMap[entry.key]!.copyWith(index: entry.key - 1,startOffset: _itemOffsetAt(entry.key));
         }
       }
     }
@@ -622,7 +622,7 @@ class MotionBuilderState extends State<MotionBuilder>
     final Widget builder =
         _insertItemBuilder(incomingItem,  child);
 
-    final motionData = childrenMap[index]!;
+    final motionData = childrenMap[index];
     //print("$index ===== StartOffset: ${motionData.startOffset}");
     if (motionData == null) return builder;
     final OverlayState overlay = Overlay.of(context, debugRequiredFor: widget);
@@ -633,8 +633,7 @@ class MotionBuilderState extends State<MotionBuilder>
       motionData: motionData,
       updateMotionData: (MotionData motionData) {
         final itemOffset = _itemOffsetAt(index);
-        final updateMotiondata= motionData.copyWith(startOffset: itemOffset, endOffset: itemOffset);
-        childrenMap[index] = updateMotiondata;
+        childrenMap[index] = motionData.copyWith(startOffset: itemOffset, endOffset: itemOffset);
       },
       capturedThemes:
           InheritedTheme.capture(from: context, to: overlay.context),

diff --git a/lib/src/component/motion_animated_content.dart b/lib/src/component/motion_animated_content.dart
@@ -97,9 +97,6 @@ class MotionAnimatedContentState extends State<MotionAnimatedContent>
     Offset endOffset = itemOffset();
     Offset offsetDiff = (widget.motionData.startOffset + offset) - endOffset;
     _startOffset = offsetDiff;
-    print("$index OFFSETDIFF: $offsetDiff");
-
-
     if (offsetDiff.dx != 0 || offsetDiff.dy != 0) {
       if (_offsetAnimation == null) {
         _offsetAnimation = AnimationController(
@@ -108,13 +105,8 @@ class MotionAnimatedContentState extends State<MotionAnimatedContent>
         )
           ..addListener(rebuild)
           ..addStatusListener((AnimationStatus status) {
-            print("$index $status");
             if (status == AnimationStatus.completed) {
-              setState(() {
-                visible = true;
-              });
-              final itemOFFSET = itemOffset();
-              print("----------- $index  ---- $itemOFFSET");
+              widget.updateMotionData?.call(widget.motionData);
 
               _startOffset = _targetOffset;
               _offsetAnimation!.dispose();