Use widget size for flutter plane indicator

Author: gonuit

example/lib/indicators/plane_indicator.dart

@@ -150,105 +150,109 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
 
   @override
   Widget build(BuildContext context) {
-    final screenWidth = MediaQuery.of(context).size.width;
-    final plane = AnimatedBuilder(
-      animation: _planeController,
-      child: Image.asset(
-        "assets/plane_indicator/plane.png",
-        width: 172,
-        height: 50,
-        fit: BoxFit.contain,
-      ),
-      builder: (BuildContext context, Widget? child) {
-        return Transform.translate(
-          offset: Offset(
-              0.0, 10 * (0.5 - _planeTween.transform(_planeController.value))),
-          child: child,
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final screenWidth = constraints.maxWidth;
+        final plane = AnimatedBuilder(
+          animation: _planeController,
+          child: Image.asset(
+            "assets/plane_indicator/plane.png",
+            width: 172,
+            height: 50,
+            fit: BoxFit.contain,
+          ),
+          builder: (BuildContext context, Widget? child) {
+            return Transform.translate(
+              offset: Offset(0.0,
+                  10 * (0.5 - _planeTween.transform(_planeController.value))),
+              child: child,
+            );
+          },
         );
-      },
-    );
-    return CustomRefreshIndicator(
-      offsetToArmed: _offsetToArmed,
-      child: widget.child,
-      onRefresh: () => Future.delayed(const Duration(seconds: 3)),
-      builder:
-          (BuildContext context, Widget child, IndicatorController controller) {
-        return AnimatedBuilder(
-          animation: controller,
-          child: child,
-          builder: (context, child) {
-            final currentState = controller.state;
-            if (_prevState == IndicatorState.armed &&
-                currentState == IndicatorState.loading) {
-              _startCloudAnimation();
-              _startPlaneAnimation();
-            } else if (_prevState == IndicatorState.loading &&
-                currentState == IndicatorState.hiding) {
-              _stopPlaneAnimation();
-            } else if (_prevState == IndicatorState.hiding &&
-                currentState != _prevState) {
-              _stopCloudAnimation();
-            }
+        return CustomRefreshIndicator(
+          offsetToArmed: _offsetToArmed,
+          child: widget.child,
+          onRefresh: () => Future.delayed(const Duration(seconds: 3)),
+          builder: (BuildContext context, Widget child,
+              IndicatorController controller) {
+            return AnimatedBuilder(
+              animation: controller,
+              child: child,
+              builder: (context, child) {
+                final currentState = controller.state;
+                if (_prevState == IndicatorState.armed &&
+                    currentState == IndicatorState.loading) {
+                  _startCloudAnimation();
+                  _startPlaneAnimation();
+                } else if (_prevState == IndicatorState.loading &&
+                    currentState == IndicatorState.hiding) {
+                  _stopPlaneAnimation();
+                } else if (_prevState == IndicatorState.hiding &&
+                    currentState != _prevState) {
+                  _stopCloudAnimation();
+                }
 
-            _prevState = currentState;
+                _prevState = currentState;
 
-            return Stack(
-              clipBehavior: Clip.hardEdge,
-              children: <Widget>[
-                if (_prevState != IndicatorState.idle)
-                  Container(
-                    height: _offsetToArmed * controller.value,
-                    color: const Color(0xFFFDFEFF),
-                    width: double.infinity,
-                    child: AnimatedBuilder(
-                      animation: _clouds.first.controller!,
-                      builder: (BuildContext context, Widget? child) {
-                        return Stack(
-                          clipBehavior: Clip.hardEdge,
-                          children: <Widget>[
-                            for (final cloud in _clouds)
-                              Transform.translate(
-                                offset: Offset(
-                                  ((screenWidth + cloud.width!) *
-                                          cloud.controller!.value) -
-                                      cloud.width!,
-                                  cloud.dy! * controller.value,
-                                ),
-                                child: OverflowBox(
-                                  minWidth: cloud.width,
-                                  minHeight: cloud.width,
-                                  maxHeight: cloud.width,
-                                  maxWidth: cloud.width,
-                                  alignment: Alignment.topLeft,
-                                  child: Image(
-                                    color: cloud.color,
-                                    image: cloud.image!,
-                                    fit: BoxFit.contain,
+                return Stack(
+                  clipBehavior: Clip.hardEdge,
+                  children: <Widget>[
+                    if (_prevState != IndicatorState.idle)
+                      Container(
+                        height: _offsetToArmed * controller.value,
+                        color: const Color(0xFFFDFEFF),
+                        width: double.infinity,
+                        child: AnimatedBuilder(
+                          animation: _clouds.first.controller!,
+                          builder: (BuildContext context, Widget? child) {
+                            return Stack(
+                              clipBehavior: Clip.hardEdge,
+                              children: <Widget>[
+                                for (final cloud in _clouds)
+                                  Transform.translate(
+                                    offset: Offset(
+                                      ((screenWidth + cloud.width!) *
+                                              cloud.controller!.value) -
+                                          cloud.width!,
+                                      cloud.dy! * controller.value,
+                                    ),
+                                    child: OverflowBox(
+                                      minWidth: cloud.width,
+                                      minHeight: cloud.width,
+                                      maxHeight: cloud.width,
+                                      maxWidth: cloud.width,
+                                      alignment: Alignment.topLeft,
+                                      child: Image(
+                                        color: cloud.color,
+                                        image: cloud.image!,
+                                        fit: BoxFit.contain,
+                                      ),
+                                    ),
                                   ),
-                                ),
-                              ),
 
-                            /// plane
-                            Center(
-                              child: OverflowBox(
-                                child: plane,
-                                maxWidth: 172,
-                                minWidth: 172,
-                                maxHeight: 50,
-                                minHeight: 50,
-                                alignment: Alignment.center,
-                              ),
-                            ),
-                          ],
-                        );
-                      },
+                                /// plane
+                                Center(
+                                  child: OverflowBox(
+                                    child: plane,
+                                    maxWidth: 172,
+                                    minWidth: 172,
+                                    maxHeight: 50,
+                                    minHeight: 50,
+                                    alignment: Alignment.center,
+                                  ),
+                                ),
+                              ],
+                            );
+                          },
+                        ),
+                      ),
+                    Transform.translate(
+                      offset: Offset(0.0, _offsetToArmed * controller.value),
+                      child: child,
                     ),
-                  ),
-                Transform.translate(
-                  offset: Offset(0.0, _offsetToArmed * controller.value),
-                  child: child,
-                ),
-              ],
+                  ],
+                );
+              },
             );
           },
         );