fix: answer box

1 week ago · 48289bf6eb
7 changed files with 152 additions and 46 deletions
--- a/assets/images/correct.svg
+++ b/assets/images/correct.svg
@ -0,0 +1,17 @@
+<svg width="56" height="51" viewBox="0 0 56 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.9315 40.1706C50.273 47.4826 8.41234 52.8752 4.94604 45.3438C1.79486 38.5071 4.18298 10.6119 6.86977 5.71281C10.5517 -0.941101 46.6743 3.73857 49.7259 8.96665C52.4625 13.8474 53.6729 32.6758 51.9315 40.1706Z" fill="url(#paint0_radial_498_2733)"/>
+<path d="M51.8976 38.6412C50.2314 45.5766 8.42476 49.5346 4.95895 42.2723C1.80973 35.7181 4.1427 10.6451 6.84203 5.96088C10.5245 -0.411776 46.8321 4.14531 49.7314 9.08366C52.564 13.7678 53.6472 31.4697 51.8976 38.6412Z" fill="#83FF9A"/>
+<path d="M51.1313 38.0099C49.4846 44.7332 9.07525 48.6218 5.71605 41.6441C2.66971 35.2661 4.95877 10.7532 7.5605 6.28314C11.1173 0.104962 46.1418 4.46602 49.0235 9.31771C51.7076 13.8423 52.8109 31.1049 51.1313 38.0099Z" fill="url(#paint1_linear_498_2733)"/>
+<path d="M42.7617 10.3223L45.8039 13.8678C45.8039 13.8678 39.6579 27.7548 27.4283 35.2666L24.021 31.7743C29.745 23.0196 34.8523 18.2151 42.7617 10.3223Z" fill="white"/>
+<path d="M14.4469 22.8692L18.1136 19.4287C18.1136 19.4287 23.6853 22.6213 30.7432 32.8774L27.3564 35.4214C18.7247 29.3454 19.7432 29.9525 14.4469 22.8692Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_498_2733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43.704 56.9891) rotate(180) scale(23.8475 33.2277)">
+<stop stop-color="#83FF87"/>
+<stop offset="1" stop-color="#33E04D"/>
+</radialGradient>
+<linearGradient id="paint1_linear_498_2733" x1="28.0944" y1="45.3329" x2="28.0944" y2="3.21222" gradientUnits="userSpaceOnUse">
+<stop stop-color="#21B738"/>
+<stop offset="1" stop-color="#31C747"/>
+</linearGradient>
+</defs>
+</svg>
--- a/assets/images/wrong.svg
+++ b/assets/images/wrong.svg
@ -0,0 +1,17 @@
+<svg width="56" height="51" viewBox="0 0 56 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.931 40.1706C50.2725 47.4826 8.41185 52.8752 4.94555 45.3438C1.79438 38.5071 4.18249 10.6118 6.86929 5.71281C10.5512 -0.9411 46.6738 3.73857 49.7254 8.96665C52.462 13.8474 53.6724 32.6758 51.931 40.1706Z" fill="url(#paint0_radial_498_2741)"/>
+<path d="M51.8971 38.6402C50.2309 45.5757 8.42427 49.5336 4.95847 42.2713C1.80925 35.7171 4.14221 10.6441 6.84155 5.9599C10.524 -0.412752 46.8316 4.14433 49.7309 9.08268C52.5635 13.7669 53.6467 31.4687 51.8971 38.6402Z" fill="#FF8385"/>
+<path d="M51.1308 38.0099C49.4841 44.7332 9.07476 48.6218 5.71555 41.6441C2.66922 35.2661 4.95828 10.7532 7.56002 6.28314C11.1168 0.104962 46.1414 4.46602 49.023 9.31771C51.7071 13.8423 52.8104 31.1049 51.1308 38.0099Z" fill="url(#paint1_linear_498_2741)"/>
+<path d="M36.615 10.8369L39.6572 14.3825C39.6572 14.3825 30.2869 29.6865 18.0573 37.1983L15.5018 33.853C21.2258 25.0984 28.3573 17.3243 36.615 10.8369Z" fill="white"/>
+<path d="M15.6688 15.9368L19.2587 12.9521C19.2587 12.9521 35.3009 24.0095 42.3588 34.2656L38.972 36.8096C30.1099 31.1458 22.2395 24.0962 15.6688 15.9368Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_498_2741" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43.7035 56.9891) rotate(180) scale(23.8475 33.2277)">
+<stop stop-color="#FF8385"/>
+<stop offset="1" stop-color="#E03336"/>
+</radialGradient>
+<linearGradient id="paint1_linear_498_2741" x1="28.0939" y1="45.3328" x2="28.0939" y2="3.21222" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C72427"/>
+<stop offset="1" stop-color="#E03336"/>
+</linearGradient>
+</defs>
+</svg>
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@ -25,4 +25,6 @@ class MyAssets {
  static const String bubbleChatRight = 'assets/images/bubble_chat_right.svg';
  static const String diamond = 'assets/images/diamond.png';
  static const String done = 'assets/images/done.svg';
+  static const String correct = 'assets/images/correct.svg';
+  static const String wrong = 'assets/images/wrong.svg';
 }
--- a/lib/core/widgets/answer_box/answer_box.dart
+++ b/lib/core/widgets/answer_box/answer_box.dart
@ -33,11 +33,8 @@ class _AnswerBoxState extends State<AnswerBox> {
              left: 0,
              right: 0,
              bottom: -36,
-              child: SizedBox(
-                height: 60,
              child: AnswerTextBox(),
            ),
-            ),
          ],
        ),
      ),
--- a/lib/core/widgets/answer_box/styles/picture_box.dart
+++ b/lib/core/widgets/answer_box/styles/picture_box.dart
@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
+import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_image.dart';

 class AnswerPictureBox extends StatelessWidget {
@ -14,8 +17,53 @@ class AnswerPictureBox extends StatelessWidget {
      foregroundPainter: _SvgCustomPainter(selected),
      child: ClipPath(
        clipper: _SvgCustomClipper(),
+        child: Stack(
+          children: [
+            MyImage(
+              image: MyAssets.backgroundIntro,
+              fit: BoxFit.cover,
+              size: 170,
+            ),
+            PositionedDirectional(
+              top: MySpaces.s12,
+              start: MySpaces.s12,
+              child: ClipPath(
+                clipper: _CountClipper(),
+                child: Container(
+                  height: MySpaces.s32,
+                  width: MySpaces.s32,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        Color(0XFF5732CB),
+                        Color(0XFF322386),
+                      ],
+                    ),
+                  ),
+                  child: Text(
+                    '1',
+                    style: GoogleFonts.marhey(
+                      fontSize: 17,
+                      fontWeight: FontWeight.w600,
+                      color: context.primaryColor,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            PositionedDirectional(
+              top: MySpaces.s14,
+              end: MySpaces.s12,
              child: MyImage(
-          image: MyAssets.backgroundIntro, fit: BoxFit.cover, size: 170),
+                image: MyAssets.correct,
+                size: MySpaces.s40,
+              ),
+            ),
+          ],
+        ),
      ),
    );
  }
@ -125,3 +173,37 @@ class _SvgCustomPainter extends CustomPainter {
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
 }
+
+class _CountClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    // Original SVG viewBox: width=34, height=33
+    final sx = size.width / 34.0;
+    final sy = size.height / 33.0;
+
+    final p = Path()
+      ..moveTo(33.3479 * sx, 14.8127 * sy)
+      ..cubicTo(
+        33.3479 * sx, 23.7042 * sy,
+        27.2015 * sx, 32.9501 * sy,
+        17.8599 * sx, 32.9501 * sy,
+      )..cubicTo(
+        8.51818 * sx, 32.9501 * sy,
+        0.945251 * sx, 25.7421 * sy,
+        0.945251 * sx, 16.8507 * sy,
+      )..cubicTo(
+        0.945251 * sx, 7.95917 * sy,
+        8.51818 * sx, 0.751205 * sy,
+        17.8599 * sx, 0.751205 * sy,
+      )..cubicTo(
+        27.2015 * sx, 0.751205 * sy,
+        33.3479 * sx, 5.92127 * sy,
+        33.3479 * sx, 14.8127 * sy,
+      )..close();
+
+    return p;
+  }
+
+  @override
+  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
+}
--- a/lib/core/widgets/answer_box/styles/text_box.dart
+++ b/lib/core/widgets/answer_box/styles/text_box.dart
@ -1,39 +1,43 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';

 class AnswerTextBox extends StatelessWidget {
  const AnswerTextBox({super.key});

  @override
  Widget build(BuildContext context) {
-    return AspectRatio(
-      aspectRatio: 480 / 149.0,
-      child: Stack(
-        alignment: Alignment.center,
-        children: [
-          Positioned.fill(
-            child: CustomPaint(
-              painter: _WavyBannerPainter(),
+    return ClipPath(
+      clipper: _WavyBannerClipper(),
+      child: Container(
+        padding: EdgeInsets.all(MySpaces.s10),
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              Color(0XFFFFFFFF),
+              Color(0XFFCADCFF),
+            ],
          ),
        ),
-          Text(
-            'We walk in the yard with a glass of juice',
+        child: Text(
+          'We walk in the yard with a glass of juice ',
          textAlign: TextAlign.center,
          style: GoogleFonts.marhey(
-              fontSize: 12,
-              fontWeight: FontWeight.w600,
+            fontSize: 14,
+            fontWeight: FontWeight.w700,
            color: Color(0XFF322386)
          ),
-          )
-        ],
+        ),
      ),
    );
  }
 }

-class _WavyBannerPainter extends CustomPainter {
+class _WavyBannerClipper extends CustomClipper<Path> {
  @override
-  void paint(Canvas canvas, Size size) {
+  Path getClip(Size size) {
    final sx = size.width / 480.0;
    final sy = size.height / 149.0;

@ -44,19 +48,9 @@ class _WavyBannerPainter extends CustomPainter {
      ..cubicTo(488.753 * sx, 118.634 * sy, 483.484 * sx, 26.7097 * sy, 459.365 * sx, 10.3813 * sy)
      ..cubicTo(435.246 * sx, -5.94701 * sy, 41.0302 * sx, -3.23423 * sy, 14.0623 * sx, 20.0845 * sy)
      ..close();
-
-    final paint = Paint()
-      ..style = PaintingStyle.fill
-      ..isAntiAlias = true
-      ..shader = const LinearGradient(
-        begin: Alignment.bottomCenter,
-        end: Alignment.topCenter,
-        colors: [Color(0xFFCADCFF), Colors.white],
-      ).createShader(Offset.zero & size);
-
-    canvas.drawPath(path, paint);
+    return path;
  }

  @override
-  bool shouldRepaint(covariant _WavyBannerPainter oldDelegate) => false;
+  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
 }
--- a/lib/features/question/presentation/ui/question_page.dart
+++ b/lib/features/question/presentation/ui/question_page.dart
@ -137,8 +137,7 @@ class QuestionPage extends StatelessWidget {
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
-          Positioned.directional(
-            textDirection: Directionality.of(context),
+          PositionedDirectional(
            start: 0,
            top: -10,
            child: LeftBlob(),
@ -147,14 +146,12 @@ class QuestionPage extends StatelessWidget {
            padding: const EdgeInsetsDirectional.only(end: 60),
            child: MyImage(image: MyAssets.persons),
          ),
-          Positioned.directional(
-            textDirection: Directionality.of(context),
+          PositionedDirectional(
            start: 210,
            top: -20,
            child: RightBlob(),
          ),
-          Positioned.directional(
-            textDirection: Directionality.of(context),
+          PositionedDirectional(
            end: 0,
            bottom: 10,
            child: RefreshButton(