feat: add image precaching

Author: gonuit

CHANGELOG.md

@@ -6,6 +6,7 @@
   - The checkmark indicator example has been simplified.
   - Minor corrections to the envelope indicator.
   - Removed unused code.
+  - Added image precaching.
 ## 2.2.1
 - Fixed typos in documentation
 ## 2.2.0

example/lib/indicators/ice_cream_indicator.dart

@@ -1,13 +1,15 @@
+import 'dart:async';
+
 import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
 import 'package:flutter/material.dart';
 
 class ParallaxConfig {
-  final int? level;
-  final AssetImage? image;
+  final int level;
+  final AssetImage image;
 
   const ParallaxConfig({
-    this.level,
-    this.image,
+    required this.level,
+    required this.image,
   });
 }
 
@@ -23,8 +25,7 @@ class IceCreamIndicator extends StatefulWidget {
   State<IceCreamIndicator> createState() => _IceCreamIndicatorState();
 }
 
-class _IceCreamIndicatorState extends State<IceCreamIndicator>
-    with SingleTickerProviderStateMixin {
+class _IceCreamIndicatorState extends State<IceCreamIndicator> with SingleTickerProviderStateMixin {
   static const _assets = <ParallaxConfig>[
     ParallaxConfig(
       image: AssetImage("assets/ice_cream_indicator/cup2.png"),
@@ -64,22 +65,28 @@ class _IceCreamIndicatorState extends State<IceCreamIndicator>
 
   @override
   void initState() {
-    _spoonController =
-        AnimationController(vsync: this, duration: const Duration(seconds: 1));
+    _spoonController = AnimationController(vsync: this, duration: const Duration(seconds: 1));
+    WidgetsBinding.instance.addPostFrameCallback((_) => _precacheImages());
     super.initState();
   }
 
+  void _precacheImages() {
+    for (final config in _assets) {
+      unawaited(precacheImage(config.image, context));
+    }
+  }
+
   Widget _buildImage(IndicatorController controller, ParallaxConfig asset) {
     return Transform.translate(
       offset: Offset(
         0,
-        -(asset.level! * (controller.value.clamp(1.0, 1.5) - 1.0) * 20) + 10,
+        -(asset.level * (controller.value.clamp(1.0, 1.5) - 1.0) * 20) + 10,
       ),
       child: OverflowBox(
         maxHeight: _imageSize,
         minHeight: _imageSize,
         child: Image(
-          image: asset.image!,
+          image: asset.image,
           fit: BoxFit.contain,
           height: _imageSize,
         ),
@@ -126,9 +133,7 @@ class _IceCreamIndicatorState extends State<IceCreamIndicator>
                             child: _buildImage(controller, _assets[i]),
                             builder: (context, child) {
                               return Transform.rotate(
-                                angle: (-_spoonTween
-                                        .transform(_spoonController.value)) *
-                                    1.25,
+                                angle: (-_spoonTween.transform(_spoonController.value)) * 1.25,
                                 child: child,
                               );
                             },

example/lib/indicators/plane_indicator.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
 import 'package:flutter/material.dart';
 
@@ -14,19 +16,20 @@ class _Cloud {
   ];
 
   AnimationController? controller;
-  final Color? color;
-  final AssetImage? image;
-  final double? width;
-  final double? dy;
-  final double? initialValue;
-  final Duration? duration;
+  final Color color;
+  final AssetImage image;
+  final double width;
+  final double dy;
+  final double initialValue;
+  final Duration duration;
+
   _Cloud({
-    this.color,
-    this.image,
-    this.width,
-    this.dy,
-    this.initialValue,
-    this.duration,
+    required this.color,
+    required this.image,
+    required this.width,
+    required this.dy,
+    required this.initialValue,
+    required this.duration,
   });
 }
 
@@ -41,8 +44,7 @@ class PlaneIndicator extends StatefulWidget {
   State<PlaneIndicator> createState() => _PlaneIndicatorState();
 }
 
-class _PlaneIndicatorState extends State<PlaneIndicator>
-    with TickerProviderStateMixin {
+class _PlaneIndicatorState extends State<PlaneIndicator> with TickerProviderStateMixin {
   static final _planeTween = CurveTween(curve: Curves.easeInOut);
   late AnimationController _planeController;
 
@@ -54,9 +56,16 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
     );
 
     _setupCloudsAnimationControllers();
+    WidgetsBinding.instance.addPostFrameCallback((_) => _precacheImages());
     super.initState();
   }
 
+  void _precacheImages() {
+    for (final config in _clouds) {
+      unawaited(precacheImage(config.image, context));
+    }
+  }
+
   static final _clouds = [
     _Cloud(
       color: _Cloud._dark,
@@ -162,8 +171,7 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
           ),
           builder: (BuildContext context, Widget? child) {
             return Transform.translate(
-              offset: Offset(0.0,
-                  10 * (0.5 - _planeTween.transform(_planeController.value))),
+              offset: Offset(0.0, 10 * (0.5 - _planeTween.transform(_planeController.value))),
               child: child,
             );
           },
@@ -191,8 +199,7 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
             }
           },
           onRefresh: () => Future.delayed(const Duration(seconds: 3)),
-          builder: (BuildContext context, Widget child,
-              IndicatorController controller) {
+          builder: (BuildContext context, Widget child, IndicatorController controller) {
             return AnimatedBuilder(
               animation: controller,
               child: child,
@@ -214,10 +221,8 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
                                 for (final cloud in _clouds)
                                   Transform.translate(
                                     offset: Offset(
-                                      ((screenWidth + cloud.width!) *
-                                              cloud.controller!.value) -
-                                          cloud.width!,
-                                      cloud.dy! * controller.value,
+                                      ((screenWidth + cloud.width) * cloud.controller!.value) - cloud.width,
+                                      cloud.dy * controller.value,
                                     ),
                                     child: OverflowBox(
                                       minWidth: cloud.width,
@@ -227,7 +232,7 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
                                       alignment: Alignment.topLeft,
                                       child: Image(
                                         color: cloud.color,
-                                        image: cloud.image!,
+                                        image: cloud.image,
                                         fit: BoxFit.contain,
                                       ),
                                     ),