diff --git a/assets/images/bubble_chat_left.svg b/assets/images/bubble_chat_left.svg new file mode 100644 index 0000000..9d64c11 --- /dev/null +++ b/assets/images/bubble_chat_left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/bubble_chat_right.svg b/assets/images/bubble_chat_right.svg new file mode 100644 index 0000000..b8ab88d --- /dev/null +++ b/assets/images/bubble_chat_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/home.svg b/assets/images/home.svg new file mode 100644 index 0000000..d9d0a2c --- /dev/null +++ b/assets/images/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/music.svg b/assets/images/music.svg new file mode 100644 index 0000000..03eb33b --- /dev/null +++ b/assets/images/music.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/pattern.png b/assets/images/pattern.png new file mode 100644 index 0000000..3cc6062 Binary files /dev/null and b/assets/images/pattern.png differ diff --git a/assets/images/persons.png b/assets/images/persons.png new file mode 100644 index 0000000..3438d1f Binary files /dev/null and b/assets/images/persons.png differ diff --git a/lib/common_ui/resources/my_assets.dart b/lib/common_ui/resources/my_assets.dart index 8fc0a00..b1523d5 100644 --- a/lib/common_ui/resources/my_assets.dart +++ b/lib/common_ui/resources/my_assets.dart @@ -17,4 +17,10 @@ class MyAssets { static const String language = 'assets/images/language.svg'; static const String newHorizon = 'assets/images/new_horizon.svg'; static const String khadijeLogo = 'assets/images/khadije_logo.png'; + static const String home = 'assets/images/home.svg'; + static const String music = 'assets/images/music.svg'; + static const String pattern = 'assets/images/pattern.png'; + static const String persons = 'assets/images/persons.png'; + static const String bubbleChatLeft = 'assets/images/bubble_chat_left.svg'; + static const String bubbleChatRight = 'assets/images/bubble_chat_right.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 05e4268..6c54390 100644 --- a/lib/core/widgets/answer_box/answer_box.dart +++ b/lib/core/widgets/answer_box/answer_box.dart @@ -22,7 +22,6 @@ class _AnswerBoxState extends State { }); }, child: SizedBox( - width: 170, child: Stack( alignment: Alignment.bottomCenter, clipBehavior: Clip.none, diff --git a/lib/features/intro/presentation/ui/intro_page.dart b/lib/features/intro/presentation/ui/intro_page.dart index 276f06b..bc2c0d5 100644 --- a/lib/features/intro/presentation/ui/intro_page.dart +++ b/lib/features/intro/presentation/ui/intro_page.dart @@ -80,7 +80,7 @@ class IntroPage extends StatelessWidget { size: checkSize(context: context, mobile: 90, tablet: 160), ), onTap: () { - context.pushNamed(Routes.questionPage); + context.goNamed(Routes.questionPage); }, ), MyImage( diff --git a/lib/features/question/presentation/ui/question_page.dart b/lib/features/question/presentation/ui/question_page.dart index e4aa915..798d48a 100644 --- a/lib/features/question/presentation/ui/question_page.dart +++ b/lib/features/question/presentation/ui/question_page.dart @@ -1,10 +1,216 @@ 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/core/utils/my_image.dart'; +import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; +import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box.dart'; class QuestionPage extends StatelessWidget { const QuestionPage({super.key}); @override Widget build(BuildContext context) { - return const Scaffold(); + return Scaffold( + body: Container( + height: context.heightScreen, + width: context.widthScreen, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [Color(0XFF6930DA), Color(0XFF263AA1)], + ), + image: DecorationImage( + image: AssetImage(MyAssets.pattern), + scale: 3, + repeat: ImageRepeat.repeat, + colorFilter: ColorFilter.mode( + Colors.black.withValues(alpha: 0.3), + BlendMode.srcIn, + ), + ), + ), + child: SafeArea( + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + width: 48, + height: 48, + padding: EdgeInsets.all(12), + decoration: BoxDecoration( + shape: BoxShape.circle, + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Colors.white.withValues(alpha: 0.3), + Color(0XFF6930DA).withValues(alpha: 0.1), + ], + ), + border: Border.all( + color: Colors.white.withValues(alpha: 0.3), + ), + ), + child: MyImage(image: MyAssets.home), + ), + Text( + 'Toothbrushing etiquette', + style: GoogleFonts.marhey( + fontSize: 14, + fontWeight: FontWeight.w700, + color: Colors.white, + ), + ), + Container( + width: 48, + height: 48, + padding: EdgeInsets.all(12), + decoration: BoxDecoration( + shape: BoxShape.circle, + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Colors.white.withValues(alpha: 0.3), + Color(0XFF6930DA).withValues(alpha: 0.1), + ], + ), + border: Border.all( + color: Colors.white.withValues(alpha: 0.3), + ), + ), + child: MyImage(image: MyAssets.music), + ), + ], + ), + Column( + children: [ + Text( + 'Question 1 / 5', + style: GoogleFonts.marhey( + fontSize: 12, + fontWeight: FontWeight.w500, + color: Colors.white.withValues(alpha: 0.5), + shadows: [ + Shadow( + offset: Offset(0, 1), + blurRadius: 1, + color: Color(0xFF000000).withValues(alpha: 0.25), + ), + ], + ), + ), + Text( + 'Heda wants her teeth to be clean. Which of her actions do you think is correct?', + style: GoogleFonts.marhey( + fontSize: 22, + fontWeight: FontWeight.w600, + color: Colors.white, + shadows: [ + Shadow( + offset: Offset(0, 1), + blurRadius: 1, + color: Color(0xFF000000).withValues(alpha: 0.25), + ), + ], + ), + ), + ], + ), + Expanded( + child: GridView.builder( + itemCount: 4, + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: 20, + mainAxisSpacing: 30, + ), + itemBuilder: (context, index) => AnswerBox(), + ), + ), + SizedBox( + width: context.widthScreen, + child: Stack( + clipBehavior: Clip.none, + alignment: Alignment.center, + children: [ + Positioned.directional( + textDirection: Directionality.of(context), + start: 0, + top: -10, + child: Stack( + alignment: Alignment.center, + children: [ + MyImage(image: MyAssets.bubbleChatLeft), + Text( + 'Your answer\nwas not correct.', + textAlign: TextAlign.center, + style: GoogleFonts.marhey( + fontSize: 12, + fontWeight: FontWeight.w500, + color: Color(0XFFB5AEEE), + ), + ), + ], + ), + ), + Padding( + padding: const EdgeInsetsDirectional.only(end: 90), + child: MyImage(image: MyAssets.persons), + ), + Positioned.directional( + textDirection: Directionality.of(context), + start: 220, + top: -20, + child: Stack( + alignment: Alignment.center, + children: [ + MyImage(image: MyAssets.bubbleChatRight), + Text( + 'Be more\ncareful.', + textAlign: TextAlign.center, + style: GoogleFonts.marhey( + fontSize: 12, + fontWeight: FontWeight.w500, + color: Color(0XFFB5AEEE), + ), + ), + ], + ), + ), + Positioned.directional( + textDirection: Directionality.of(context), + end: 0, + bottom: 10, + child: Container( + height: 48, + width: 48, + decoration: BoxDecoration( + shape: BoxShape.circle, + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [Color(0XFFA393FF), Color(0XFFC6BCFB)], + ), + ), + child: Icon( + Icons.refresh, + size: 40, + color: Color(0XFF263AA1), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ), + ); } }