caches gifs

lib/core/widgets/answer_box/styles/image_box.dart

@@ -0,0 +1,118 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
+
+class ImageBox extends StatelessWidget {
+  const ImageBox({
+    super.key,
+    required this.image,
+  });
+
+  final String image;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: _CustomShapePainter(),
+      child: ClipPath(
+        clipper: _CustomShapeClipper(),
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            AspectRatio(
+              aspectRatio: 1,
+              child: AnimatedSwitcher(
+                duration: const Duration(milliseconds: 150),
+                reverseDuration: const Duration(milliseconds: 150),
+                switchInCurve: Curves.linear,
+                switchOutCurve: Curves.linear,
+                child: Image(
+                  width: context.widthScreen,
+                  height: context.heightScreen,
+                  image: FileImage(File(image)),
+                  fit: BoxFit.cover,
+                ),
+                transitionBuilder: (child, animation) =>
+                    FadeTransition(
+                      opacity: animation,
+                      child: child,
+                    ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _CustomShapePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Paint strokePaint = Paint()
+      ..color = const Color(0XFFF2F7FF)
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 4;
+
+    final Path path = _CustomShapeClipper().getClip(size);
+    canvas.drawPath(path, strokePaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return this != oldDelegate;
+  }
+}
+
+class _CustomShapeClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    // Original SVG dimensions to calculate the scaling factors.
+    const double originalWidth = 193.0;
+    const double originalHeight = 189.0;
+
+    // Scaling factors to make the path responsive.
+    final double scaleX = size.width / originalWidth;
+    final double scaleY = size.height / originalHeight;
+
+    // The path is defined using the scaled coordinates from the SVG.
+    final Path path = Path()
+      ..moveTo(148.483 * scaleX, 4.10254 * scaleY)
+      ..cubicTo(131.624 * scaleX, 1.93333 * scaleY, 111.221 * scaleX, 1.00169 * scaleY, 91.2451 * scaleX, 1.2666 * scaleY)
+      ..cubicTo(71.2667 * scaleX, 1.53156 * scaleY, 51.7626 * scaleX, 2.99274 * scaleY, 36.6973 * scaleX, 5.59668 * scaleY)
+      ..cubicTo(29.1597 * scaleX, 6.8995 * scaleY, 22.7796 * scaleX, 8.48114 * scaleY, 18.0205 * scaleX, 10.3203 * scaleY)
+      ..cubicTo(15.641 * scaleX, 11.2399 * scaleY, 13.7026 * scaleX, 12.2101 * scaleY, 12.2383 * scaleX, 13.2188 * scaleY)
+      ..cubicTo(10.7653 * scaleX, 14.2333 * scaleY, 9.84633 * scaleX, 15.2359 * scaleY, 9.3916 * scaleX, 16.1904 * scaleY)
+      ..cubicTo(8.252 * scaleX, 18.5828 * scaleY, 7.18153 * scaleX, 22.466 * scaleY, 6.2207 * scaleX, 27.5654 * scaleY)
+      ..cubicTo(5.26481 * scaleX, 32.6387 * scaleY, 4.43215 * scaleX, 38.8273 * scaleY, 3.73535 * scaleX, 45.7744 * scaleY)
+      ..cubicTo(2.34189 * scaleX, 59.6675 * scaleY, 1.49647 * scaleX, 76.5363 * scaleY, 1.27832 * scaleX, 93.4678 * scaleY)
+      ..cubicTo(1.06017 * scaleX, 110.4 * scaleY, 1.47057 * scaleX, 127.372 * scaleY, 2.58301 * scaleX, 141.473 * scaleY)
+      ..cubicTo(3.13928 * scaleX, 148.524 * scaleY, 3.86921 * scaleX, 154.841 * scaleY, 4.78125 * scaleX, 160.068 * scaleY)
+      ..cubicTo(5.69748 * scaleX, 165.32 * scaleY, 6.78334 * scaleX, 169.385 * scaleY, 8.01367 * scaleX, 171.984 * scaleY)
+      ..cubicTo(8.53417 * scaleX, 173.084 * scaleY, 9.59654 * scaleX, 174.216 * scaleY, 11.2891 * scaleX, 175.343 * scaleY)
+      ..cubicTo(12.9722 * scaleX, 176.463 * scaleY, 15.1988 * scaleX, 177.524 * scaleY, 17.9219 * scaleX, 178.515 * scaleY)
+      ..cubicTo(23.3679 * scaleX, 180.496 * scaleY, 30.6491 * scaleX, 182.138 * scaleY, 39.1807 * scaleX, 183.437 * scaleY)
+      ..cubicTo(56.2336 * scaleX, 186.032 * scaleY, 78.0934 * scaleX, 187.222 * scaleY, 99.8242 * scaleX, 187.064 * scaleY)
+      ..cubicTo(121.556 * scaleX, 186.906 * scaleY, 143.101 * scaleX, 185.4 * scaleY, 159.525 * scaleX, 182.622 * scaleY)
+      ..cubicTo(167.745 * scaleX, 181.232 * scaleY, 174.627 * scaleX, 179.531 * scaleY, 179.594 * scaleX, 177.548 * scaleY)
+      ..cubicTo(182.079 * scaleX, 176.556 * scaleY, 184.034 * scaleX, 175.512 * scaleY, 185.429 * scaleX, 174.437 * scaleY)
+      ..cubicTo(186.83 * scaleX, 173.355 * scaleY, 187.568 * scaleX, 172.319 * scaleY, 187.812 * scaleX, 171.361 * scaleY)
+      ..lineTo(187.812 * scaleX, 171.361 * scaleY) // In SVG, this was H (horizontal line), equivalent to lineTo in Flutter
+      ..cubicTo(189.156 * scaleX, 166.074 * scaleY, 190.148 * scaleX, 155.525 * scaleY, 190.773 * scaleX, 142.157 * scaleY)
+      ..cubicTo(191.396 * scaleX, 128.832 * scaleY, 191.651 * scaleX, 112.822 * scaleY, 191.552 * scaleX, 96.6875 * scaleY)
+      ..cubicTo(191.453 * scaleX, 80.5539 * scaleY, 191.001 * scaleX, 64.3091 * scaleY, 190.213 * scaleX, 50.5156 * scaleY)
+      ..cubicTo(189.423 * scaleX, 36.6928 * scaleY, 188.299 * scaleX, 25.4153 * scaleY, 186.876 * scaleX, 19.167 * scaleY)
+      ..cubicTo(186.404 * scaleX, 17.0929 * scaleY, 185.566 * scaleX, 15.3424 * scaleY, 184.087 * scaleX, 14.1582 * scaleY)
+      ..cubicTo(181.343 * scaleX, 11.9613 * scaleY, 176.72 * scaleX, 9.98089 * scaleY, 170.561 * scaleX, 8.27539 * scaleY)
+      ..cubicTo(164.434 * scaleX, 6.579 * scaleY, 156.914 * scaleX, 5.18731 * scaleY, 148.483 * scaleX, 4.10254 * scaleY)
+      ..close(); // Closes the path to form a complete shape.
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
+    return this != oldClipper;
+  }
+}

lib/features/question/presentation/ui/screens/question_screen.dart

@@ -1,7 +1,6 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:gif/gif.dart';
 import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
 import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart';
 import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart';
@@ -18,7 +17,7 @@ import 'package:hadi_hoda_flutter/core/widgets/animations/globe_animation.dart';
 import 'package:hadi_hoda_flutter/core/widgets/animations/slide_anim.dart';
 import 'package:hadi_hoda_flutter/core/widgets/animations/slide_up_fade.dart';
 import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box.dart';
-import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/picture_box.dart';
+import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/image_box.dart';
 import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
 import 'package:hadi_hoda_flutter/features/question/domain/entity/answer_entity.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart';
@@ -101,14 +100,9 @@ class _QuestionScreenState extends State<QuestionScreen>
             _titles(context),
             20.0.gapHeight,
             BlocBuilder<QuestionBloc, QuestionState>(
-              builder: (context, state) => AnswerPictureBox(
+              builder: (context, state) => ImageBox(
                 key: Key('${state.currentQuestion?.image}'),
-                selected: false,
-                showIndex: false,
-                correctAnswer: 0,
-                index: 0,
                 image: state.currentQuestion?.image ?? '',
-                autostart: Autostart.loop,
               ),
             ),
           ],