From 48289bf6eb77564f5e27b82aae8bc842ca07e164 Mon Sep 17 00:00:00 2001 From: AmirrezaChegini Date: Sun, 28 Sep 2025 20:18:57 +0330 Subject: [PATCH] fix: answer box --- assets/images/correct.svg | 17 ++++ assets/images/wrong.svg | 17 ++++ lib/common_ui/resources/my_assets.dart | 2 + lib/core/widgets/answer_box/answer_box.dart | 5 +- .../answer_box/styles/picture_box.dart | 86 ++++++++++++++++++- .../widgets/answer_box/styles/text_box.dart | 62 ++++++------- .../presentation/ui/question_page.dart | 9 +- 7 files changed, 152 insertions(+), 46 deletions(-) create mode 100644 assets/images/correct.svg create mode 100644 assets/images/wrong.svg diff --git a/assets/images/correct.svg b/assets/images/correct.svg new file mode 100644 index 0000000..17b0900 --- /dev/null +++ b/assets/images/correct.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/images/wrong.svg b/assets/images/wrong.svg new file mode 100644 index 0000000..ebf05ff --- /dev/null +++ b/assets/images/wrong.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart index 473d276..f2a20e9 100644 --- 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'; } \ No newline at end of file diff --git a/lib/core/widgets/answer_box/answer_box.dart b/lib/core/widgets/answer_box/answer_box.dart index 6c54390..b22198e 100644 --- a/lib/core/widgets/answer_box/answer_box.dart +++ b/lib/core/widgets/answer_box/answer_box.dart @@ -33,10 +33,7 @@ class _AnswerBoxState extends State { left: 0, right: 0, bottom: -36, - child: SizedBox( - height: 60, - child: AnswerTextBox(), - ), + child: AnswerTextBox(), ), ], ), diff --git a/lib/core/widgets/answer_box/styles/picture_box.dart b/lib/core/widgets/answer_box/styles/picture_box.dart index 7263d0f..1b9ab51 100644 --- 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: MyImage( - image: MyAssets.backgroundIntro, fit: BoxFit.cover, size: 170), + 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.correct, + size: MySpaces.s40, + ), + ), + ], + ), ), ); } @@ -124,4 +172,38 @@ class _SvgCustomPainter extends CustomPainter { @override bool shouldRepaint(CustomPainter oldDelegate) => true; +} + +class _CountClipper extends CustomClipper { + @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 oldClipper) => false; } \ No newline at end of file diff --git a/lib/core/widgets/answer_box/styles/text_box.dart b/lib/core/widgets/answer_box/styles/text_box.dart index ed40b1d..c636cfa 100644 --- 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', - textAlign: TextAlign.center, - style: GoogleFonts.marhey( - fontSize: 12, - fontWeight: FontWeight.w600, - color: Color(0XFF322386) - ), - ) - ], + ), + child: Text( + 'We walk in the yard with a glass of juice ', + textAlign: TextAlign.center, + style: GoogleFonts.marhey( + fontSize: 14, + fontWeight: FontWeight.w700, + color: Color(0XFF322386) + ), + ), ), ); } } -class _WavyBannerPainter extends CustomPainter { +class _WavyBannerClipper extends CustomClipper { @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 oldClipper) => false; +} \ No newline at end of file diff --git a/lib/features/question/presentation/ui/question_page.dart b/lib/features/question/presentation/ui/question_page.dart index c3ae025..b1ecdf6 100644 --- 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(