🔧 Update Pack V1 #12

Author: SaadArdati

example/lib/main.dart

@@ -5,13 +5,13 @@ import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_box_transform/flutter_box_transform.dart';
-import 'package:hyper_effects_demo/stories/chained_animation.dart';
+import 'package:hyper_effects_demo/stories/spring_animation.dart';
 import 'package:hyper_effects_demo/stories/color_filter_scroll_transition.dart';
 import 'package:hyper_effects_demo/stories/counter_app.dart';
 import 'package:hyper_effects_demo/stories/scroll_phase_transition.dart';
 import 'package:hyper_effects_demo/stories/scroll_wheel_blur.dart';
 import 'package:hyper_effects_demo/stories/scroll_wheel_transition.dart';
-import 'package:hyper_effects_demo/stories/spring_animation.dart';
+import 'package:hyper_effects_demo/stories/one_shot_animation.dart';
 import 'package:hyper_effects_demo/stories/text_animation.dart';
 import 'package:hyper_effects_demo/stories/windows_settings_transition.dart';
 
@@ -29,7 +29,6 @@ class MyApp extends StatelessWidget {
     return AdaptiveTheme(
       light: ThemeData(
         useMaterial3: true,
-        // brightness: Brightness.light,
         colorScheme: ColorScheme.fromSeed(
           brightness: Brightness.light,
           seedColor: Colors.blue,
@@ -46,8 +45,6 @@ class MyApp extends StatelessWidget {
       ),
       dark: ThemeData(
         useMaterial3: true,
-        // brightness: Brightness.dark,
-        // colorSchemeSeed: Colors.blue,
         colorScheme: ColorScheme.fromSeed(
           brightness: Brightness.dark,
           seedColor: Colors.blue,
@@ -84,25 +81,21 @@ class Storyboard extends StatefulWidget {
 class _StoryboardState extends State<Storyboard> {
   final List<Story> animationStories = [
     const Story(
-      title: 'Spring Animation',
-      child: SpringAnimation(),
+      title: 'Text Rolling Animations',
+      child: TextAnimation(),
     ),
     const Story(
-      title: 'Text Animations',
-      child: TextAnimation(),
+      title: 'Rolling Counter App',
+      child: CounterApp(),
     ),
     const Story(
-      title: 'Chained Animation',
-      child: ChainedAnimation(),
+      title: 'Fade In Animation',
+      child: OneShotAnimation(),
     ),
     const Story(
-      title: 'Counter App',
-      child: CounterApp(),
+      title: 'Spring Animation',
+      child: SpringAnimation(),
     ),
-    // const Story(
-    //   title: 'Chained Animation',
-    //   child: ChainedAnimation(),
-    // )
   ];
   final List<Story> transitionStories = [
     const Story(

example/lib/stories/chained_animation.dart

@@ -33,24 +33,10 @@ class _CounterAppState extends State<CounterApp> {
             const Text(
               'You have pushed the button this many times:',
             ),
-            Container(
-              width: double.infinity,
-              alignment: Alignment.center,
-              decoration: const BoxDecoration(),
-              clipBehavior: Clip.hardEdge,
-              child: Text(
-                '${max(0, _counter - 1)}',
-                style: Theme.of(context).textTheme.headlineMedium,
-              )
-                  .roll(
-                    '$_counter',
-                    clipBehavior: Clip.none,
-                  )
-                  .animate(
-                    toggle: _counter,
-                    duration: const Duration(milliseconds: 1000),
-                  ),
-            ),
+            Text(
+              '${max(0, _counter - 1)}',
+              style: Theme.of(context).textTheme.headlineMedium,
+            ).roll('$_counter').animate(toggle: _counter),
           ],
         ),
       ),

example/lib/stories/counter_app.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:hyper_effects/hyper_effects.dart';
+
+class OneShotAnimation extends StatefulWidget {
+  const OneShotAnimation({super.key});
+
+  @override
+  State<OneShotAnimation> createState() => _OneShotAnimationState();
+}
+
+class _OneShotAnimationState extends State<OneShotAnimation> {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Image.asset('assets/pin_ball_256x.png', width: 150, height: 150)
+          .fadeIn()
+          .slideInFromBottom()
+          .blurIn()
+          .oneShot(
+            duration: const Duration(milliseconds: 1000),
+          ).then(context).slideOutToLeft().oneShot(),
+    );
+  }
+}

example/lib/stories/one_shot_animation.dart

@@ -21,23 +21,18 @@ class _SpringAnimationState extends State<SpringAnimation> {
           });
         },
         child: Image.asset('assets/pin_ball_256x.png', width: 150, height: 150)
-            // .translateY(selected ? 300 : 0)
-            .fadeIn()
-            .slideInFromBottom()
-            .oneShot(
-              duration: const Duration(milliseconds: 1000),
-            ),
-        // .animate(
-        //     toggle: selected,
-        //     curve: selected ? Curves.easeOutQuart : Curves.elasticOut,
-        //     duration: Duration(milliseconds: selected ? 1000 : 450),
-        //     onEnd: () {
-        //       if (selected) {
-        //         setState(() {
-        //           selected = false;
-        //         });
-        //       }
-        //     }),
+            .translateY(selected ? 300 : 0)
+            .animate(
+                toggle: selected,
+                curve: selected ? Curves.easeOutQuart : Curves.elasticOut,
+                duration: Duration(milliseconds: selected ? 1000 : 450),
+                onEnd: () {
+                  if (selected) {
+                    setState(() {
+                      selected = false;
+                    });
+                  }
+                }),
       ),
     );
   }