From e608d630c8ec7648ea155efaa4aa3000bf9df375 Mon Sep 17 00:00:00 2001 From: AmirrezaChegini Date: Sat, 1 Nov 2025 13:42:36 +0330 Subject: [PATCH] fix: question responsive --- assets/svg/button_3_tablet.svg | 9 + lib/common_ui/resources/my_assets.dart | 1 + lib/core/widgets/animations/ship_anim.dart | 5 +- lib/core/widgets/answer_box/answer_box.dart | 10 +- .../widgets/answer_box/answer_box_show.dart | 10 +- .../answer_box/styles/picture_box.dart | 5 +- lib/core/widgets/button/my_white_button.dart | 2 +- .../home/presentation/ui/home_page.dart | 3 - .../presentation/ui/question_page.dart | 7 +- .../ui/screens/answer_screen.dart | 7 +- .../ui/screens/diamond_screen.dart | 186 ++++++++++-------- .../ui/screens/question_screen.dart | 4 + 12 files changed, 145 insertions(+), 104 deletions(-) create mode 100644 assets/svg/button_3_tablet.svg diff --git a/assets/svg/button_3_tablet.svg b/assets/svg/button_3_tablet.svg new file mode 100644 index 0000000..2b04573 --- /dev/null +++ b/assets/svg/button_3_tablet.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart index ff75703..2153575 100644 --- a/lib/common_ui/resources/my_assets.dart +++ b/lib/common_ui/resources/my_assets.dart @@ -46,6 +46,7 @@ class MyAssets { static const String button2 = 'assets/svg/button_2.svg'; static const String button2Tablet = 'assets/svg/button_2_tablet.svg'; static const String button3 = 'assets/svg/button_3.svg'; + static const String button3Tablet = 'assets/svg/button_3_tablet.svg'; static const String theme = 'assets/svg/theme.svg'; static const String facebook = 'assets/svg/facebook.svg'; static const String whatsapp = 'assets/svg/whatsapp.svg'; diff --git a/lib/core/widgets/animations/ship_anim.dart b/lib/core/widgets/animations/ship_anim.dart index d439aba..217ca2d 100644 --- a/lib/core/widgets/animations/ship_anim.dart +++ b/lib/core/widgets/animations/ship_anim.dart @@ -2,6 +2,7 @@ import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart'; class ShipAnim extends StatefulWidget { const ShipAnim({super.key, required this.child}); @@ -42,8 +43,8 @@ class _ShipAnimState extends State // The radius of the circular path final radius = context.widthScreen * 0.05; // Calculate the x and y coordinates for the ship - final x = radius * math.cos(angle) + 60; - final y = radius * math.sin(angle) - 70; // -80 to lift it up + final x = radius * math.cos(angle) + setSize(context: context, mobile: 60, tablet: 90)!; + final y = radius * math.sin(angle) - setSize(context: context, mobile: 70, tablet: 100)!; // -80 to lift it up return Transform.translate( offset: Offset(x, y), diff --git a/lib/core/widgets/answer_box/answer_box.dart b/lib/core/widgets/answer_box/answer_box.dart index 49004a3..adb7ad6 100644 --- a/lib/core/widgets/answer_box/answer_box.dart +++ b/lib/core/widgets/answer_box/answer_box.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.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/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/picture_box.dart'; import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/text_box.dart'; import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart'; @@ -67,13 +68,16 @@ class _AnswerBoxState extends State { child: AnswerTextBox(text: widget.answer.title ?? ''), ), PositionedDirectional( - top: MySpaces.s12, - end: MySpaces.s8, + top: setSize(context: context, mobile: MySpaces.s12, tablet: MySpaces.s20), + end: setSize(context: context, mobile: MySpaces.s8, tablet: MySpaces.s20), child: GestureDetector( onTap: () { widget.onNotifTap?.call(widget.answer); }, - child: MyImage(image: MyAssets.iconNotif), + child: MyImage( + image: MyAssets.iconNotif, + size: setSize(context: context, tablet: 50), + ), ), ), ], diff --git a/lib/core/widgets/answer_box/answer_box_show.dart b/lib/core/widgets/answer_box/answer_box_show.dart index ccc5ed9..726c799 100644 --- a/lib/core/widgets/answer_box/answer_box_show.dart +++ b/lib/core/widgets/answer_box/answer_box_show.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.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/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/picture_box.dart'; import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/text_box.dart'; import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart'; @@ -41,13 +42,16 @@ class AnswerBoxShow extends StatelessWidget { child: AnswerTextBox(text: answer.title ?? ''), ), PositionedDirectional( - top: MySpaces.s30, - end: MySpaces.s20, + top: setSize(context: context, mobile: MySpaces.s30, tablet: 60), + end: setSize(context: context, mobile: MySpaces.s20, tablet: 60), child: GestureDetector( onTap: () { onNotifTap?.call(answer); }, - child: MyImage(image: MyAssets.iconNotif, size: MySpaces.s40), + child: MyImage( + image: MyAssets.iconNotif, + size: setSize(context: context, mobile: MySpaces.s40, tablet: 60), + ), ), ), ], diff --git a/lib/core/widgets/answer_box/styles/picture_box.dart b/lib/core/widgets/answer_box/styles/picture_box.dart index 5e8141a..f1f2a56 100644 --- a/lib/core/widgets/answer_box/styles/picture_box.dart +++ b/lib/core/widgets/answer_box/styles/picture_box.dart @@ -5,6 +5,7 @@ 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_spaces.dart'; import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart'; +import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart'; class AnswerPictureBox extends StatelessWidget { @@ -77,8 +78,8 @@ class AnswerPictureBox extends StatelessWidget { ), if(selected) PositionedDirectional( - top: MySpaces.s8, - start: MySpaces.s8, + top: setSize(context: context, mobile: MySpaces.s8, tablet: MySpaces.s20), + start: setSize(context: context, mobile: MySpaces.s8, tablet: MySpaces.s20), child: MyImage( image: index == correctAnswer ? MyAssets.correct : MyAssets .wrong, diff --git a/lib/core/widgets/button/my_white_button.dart b/lib/core/widgets/button/my_white_button.dart index 76d606e..e88b951 100644 --- a/lib/core/widgets/button/my_white_button.dart +++ b/lib/core/widgets/button/my_white_button.dart @@ -32,7 +32,7 @@ class MyWhiteButton extends StatelessWidget { image: setSize( context: context, mobile: MyAssets.button3, - tablet: MyAssets.button2Tablet, + tablet: MyAssets.button3Tablet, ) ?? '', ), PositionedDirectional( diff --git a/lib/features/home/presentation/ui/home_page.dart b/lib/features/home/presentation/ui/home_page.dart index 3cdab7e..8b64cc3 100644 --- a/lib/features/home/presentation/ui/home_page.dart +++ b/lib/features/home/presentation/ui/home_page.dart @@ -58,7 +58,6 @@ class HomePage extends StatelessWidget { onTap: () => context.read().changeMute(), child: MyImage( image: snapshot.data == 0 ? MyAssets.musicOff : MyAssets.musicOn, - size: setSize(context: context, tablet: 100), ), ), ), @@ -102,7 +101,6 @@ class HomePage extends StatelessWidget { onTap: () => context.read().goToLanguagePage(context), child: MyImage( image: MyAssets.language, - size: setSize(context: context, tablet: 100), ), ), MyYellowButton( @@ -113,7 +111,6 @@ class HomePage extends StatelessWidget { onTap: () => context.read().showAboutUs(context), child: MyImage( image: MyAssets.theme, - size: setSize(context: context, tablet: 100), ), ), ], diff --git a/lib/features/question/presentation/ui/question_page.dart b/lib/features/question/presentation/ui/question_page.dart index 9556eef..3b1a73d 100644 --- a/lib/features/question/presentation/ui/question_page.dart +++ b/lib/features/question/presentation/ui/question_page.dart @@ -5,6 +5,7 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_audios.dart'; import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; import 'package:hadi_hoda_flutter/core/utils/gap.dart'; import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/animations/slide_down_fade.dart'; import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart'; import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_state.dart'; @@ -42,8 +43,10 @@ class QuestionPage extends StatelessWidget { ), ), child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: MySpaces.s16, + padding: EdgeInsets.symmetric( + horizontal: setSize(context: context, + mobile: MySpaces.s16, + tablet: MySpaces.s30) ?? 0, vertical: MySpaces.s22, ), child: Column( diff --git a/lib/features/question/presentation/ui/screens/answer_screen.dart b/lib/features/question/presentation/ui/screens/answer_screen.dart index ecbb58a..6f036b2 100644 --- a/lib/features/question/presentation/ui/screens/answer_screen.dart +++ b/lib/features/question/presentation/ui/screens/answer_screen.dart @@ -4,6 +4,7 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_animations.dart'; import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; import 'package:hadi_hoda_flutter/core/utils/context_provider.dart'; import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box_show.dart'; import 'package:hadi_hoda_flutter/features/question/domain/entity/answer_entity.dart'; import 'package:lottie/lottie.dart'; @@ -47,7 +48,11 @@ class _AnswerScreenState extends State { children: [ Center( child: Padding( - padding: const EdgeInsets.symmetric(horizontal: MySpaces.s16), + padding: EdgeInsets.symmetric( + horizontal: setSize(context: context, + mobile: MySpaces.s16, + tablet: MySpaces.s30) ?? 0, + ), child: AnswerBoxShow( answer: widget.answerEntity, index: widget.answerEntity.order ?? 0, diff --git a/lib/features/question/presentation/ui/screens/diamond_screen.dart b/lib/features/question/presentation/ui/screens/diamond_screen.dart index 606051a..7dac92d 100644 --- a/lib/features/question/presentation/ui/screens/diamond_screen.dart +++ b/lib/features/question/presentation/ui/screens/diamond_screen.dart @@ -9,6 +9,7 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart'; import 'package:hadi_hoda_flutter/core/utils/my_localization.dart'; import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/animations/ship_anim.dart'; import 'package:hadi_hoda_flutter/core/widgets/button/my_white_button.dart'; import 'package:hadi_hoda_flutter/core/widgets/button/my_yellow_button.dart'; @@ -24,107 +25,118 @@ class DiamondScreen extends StatelessWidget { return Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Stack( - alignment: Alignment.center, - children: [ - Stack( - alignment: Alignment.center, - children: [ - MyImage( - image: MyAssets.behindDiamond, - size: context.widthScreen * 1.5, - fit: BoxFit.cover, - ), - Lottie.asset( - MyAnimations.lightPurple, - ), - Transform.rotate( - angle: 0.2, - child: MyImage( - image: MyAssets.diamondBig, - size: 200, + Expanded( + child: Stack( + alignment: Alignment.center, + children: [ + Stack( + alignment: Alignment.center, + children: [ + MyImage( + image: MyAssets.behindDiamond, + size: context.widthScreen * 1.5, + fit: BoxFit.cover, ), - ), - Padding( - padding: EdgeInsets.only( - top: 250, + Lottie.asset( + MyAnimations.lightPurple, ), - child: Column( - children: [ - Text( - context.translate.you_win, - style: MYTextStyle.titr0, - ), - ShaderMask( - shaderCallback: (bounds) => LinearGradient( - begin: Alignment.centerLeft, - end: Alignment.centerRight, - colors: [ - MyColors.white, - Color(0XFF63D4F9), - ], - ).createShader(bounds), - child: Text( - context.translate.you_got_diamond, - style: MYTextStyle.titr1.copyWith( - shadows: [ - BoxShadow( - color: MyColors.black.withValues(alpha: 0.25), - offset: Offset(0, 1.22), - blurRadius: 0.82, - ), - ], - ), - ), - ), - ], - ), - ), - ], - ), - Positioned( - top: 120, - right: MySpaces.s16, - child: Stack( - children: [ Transform.rotate( - angle: 0.4, + angle: 0.2, child: MyImage( image: MyAssets.diamondBig, - size: 80, + size: setSize(context: context, mobile: 200, tablet: 300), ), ), - ClipRRect( - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3), - child: SizedBox(width: 80, height: 80,), + Positioned( + bottom: setSize( + context: context, + mobile: context.heightScreen * 0.15, + tablet: context.heightScreen * 0.2, + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + context.translate.you_win, + style: MYTextStyle.titr0, + ), + ShaderMask( + shaderCallback: (bounds) => LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [ + MyColors.white, + Color(0XFF63D4F9), + ], + ).createShader(bounds), + child: Text( + context.translate.you_got_diamond, + style: MYTextStyle.titr1.copyWith( + shadows: [ + BoxShadow( + color: MyColors.black.withValues(alpha: 0.25), + offset: Offset(0, 1.22), + blurRadius: 0.82, + ), + ], + ), + ), + ), + ], ), ), ], ), - ), - Positioned( - top: 100, - left: MySpaces.s16, - child: Stack( - children: [ - Transform.rotate( - angle: -0.6, - child: MyImage( - image: MyAssets.diamondBig, - size: 60, + Positioned( + top: setSize(context: context, mobile: 120, tablet: 220), + right: setSize(context: context, mobile: MySpaces.s16, tablet: 60), + child: Stack( + children: [ + Transform.rotate( + angle: 0.4, + child: MyImage( + image: MyAssets.diamondBig, + size: setSize(context: context, mobile: 80, tablet: 150), + ), ), - ), - ClipRRect( - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), - child: SizedBox(width: 80, height: 80,), + ClipRRect( + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3), + child: SizedBox( + width: setSize(context: context, mobile: 80, tablet: 200), + height: setSize(context: context, mobile: 80, tablet: 200), + ), + ), ), - ), - ], + ], + ), ), - ), - ], + Positioned( + top: setSize(context: context, mobile: 100, tablet: 200), + left: setSize(context: context, mobile: 16, tablet: 60), + child: Stack( + children: [ + Transform.rotate( + angle: -0.6, + child: MyImage( + image: MyAssets.diamondBig, + size: setSize(context: context, mobile: 60, tablet: 100), + ), + ), + ClipRRect( + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), + child: SizedBox( + width: setSize(context: context, mobile: 80, tablet: 200), + height: setSize(context: context, mobile: 80, tablet: 200), + ), + ), + ), + ], + ), + ), + ], + ), ), Stack( alignment: Alignment.center, diff --git a/lib/features/question/presentation/ui/screens/question_screen.dart b/lib/features/question/presentation/ui/screens/question_screen.dart index 1827676..c51214f 100644 --- a/lib/features/question/presentation/ui/screens/question_screen.dart +++ b/lib/features/question/presentation/ui/screens/question_screen.dart @@ -6,6 +6,7 @@ import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart'; import 'package:hadi_hoda_flutter/core/utils/gap.dart'; import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart'; import 'package:hadi_hoda_flutter/core/widgets/animations/fade_anim.dart'; import 'package:hadi_hoda_flutter/core/widgets/animations/slide_anim.dart'; import 'package:hadi_hoda_flutter/core/widgets/animations/slide_up_fade.dart'; @@ -81,6 +82,9 @@ class QuestionScreen extends StatelessWidget { previous.currentQuestion?.id != current.currentQuestion?.id, builder: (context, state) => GridView.builder( itemCount: state.currentQuestion?.answers?.length ?? 0, + padding: EdgeInsets.symmetric( + horizontal: setSize(context: context, tablet: 50) ?? 0, + ), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: MySpaces.s20, -- 2.30.2