From b395f80e017b6233697cd1227afb4f4f9367a8b1 Mon Sep 17 00:00:00 2001 From: Eugene600 Date: Fri, 18 Oct 2024 22:10:00 +0300 Subject: [PATCH 1/3] Used MediaQuery to control the height of the bottom sheet in askme_home page based on screen size --- lib/tools/ask_me/pages/askme_home.dart | 34 +++++++++++++++++++------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/lib/tools/ask_me/pages/askme_home.dart b/lib/tools/ask_me/pages/askme_home.dart index 14981a1..3a9722a 100644 --- a/lib/tools/ask_me/pages/askme_home.dart +++ b/lib/tools/ask_me/pages/askme_home.dart @@ -217,6 +217,8 @@ class _AskMeHomeState extends State { floatingActionButton: FloatingActionButton( onPressed: () { _bottomSheet(context); + // final screenHeight = MediaQuery.of(context).size.height; + // debugPrint("Screen Height is $screenHeight"); }, child: const Icon(Icons.add), ), @@ -232,15 +234,29 @@ class _AskMeHomeState extends State { ), isScrollControlled: true, showDragHandle: true, - builder: (context) => FractionallySizedBox( - heightFactor: 0.7, - child: ModalContent( - id: id, - title: title, - filepath: filepath, - avgScore: avgScore, - ), - ), + builder: (context) { + //Get the screen height + final screenHeight = MediaQuery.of(context).size.height; + + //adjusting height factor based on screen height + double heightFactor = 0.7; + + if (screenHeight < 600) { + heightFactor = 0.9; + } else if (screenHeight < 800) { + heightFactor = 0.8; + } + + return FractionallySizedBox( + heightFactor: heightFactor, + child: ModalContent( + id: id, + title: title, + filepath: filepath, + avgScore: avgScore, + ), + ); + }, ); } } From 05a9bb090ed0456817c3e662f4903cbe11655037 Mon Sep 17 00:00:00 2001 From: Eugene600 Date: Fri, 25 Oct 2024 17:42:23 +0300 Subject: [PATCH 2/3] Set themes in ask me to use themes from material3 --- lib/tools/ask_me/pages/askme_home.dart | 3 + lib/tools/ask_me/pages/modal_content.dart | 25 +- lib/tools/ask_me/pages/question_screen.dart | 380 +++++++++----------- lib/tools/ask_me/pages/score_section.dart | 162 +++------ lib/tools/ask_me/widgets/choice_widget.dart | 7 +- 5 files changed, 236 insertions(+), 341 deletions(-) diff --git a/lib/tools/ask_me/pages/askme_home.dart b/lib/tools/ask_me/pages/askme_home.dart index 3a9722a..82369f2 100644 --- a/lib/tools/ask_me/pages/askme_home.dart +++ b/lib/tools/ask_me/pages/askme_home.dart @@ -17,6 +17,7 @@ class _AskMeHomeState extends State { @override Widget build(BuildContext context) { + final theme = Theme.of(context); return Scaffold( appBar: AppBar( title: const Text("Ask Me"), @@ -220,6 +221,8 @@ class _AskMeHomeState extends State { // final screenHeight = MediaQuery.of(context).size.height; // debugPrint("Screen Height is $screenHeight"); }, + backgroundColor: theme.colorScheme.primaryContainer, + foregroundColor: theme.colorScheme.onPrimaryContainer, child: const Icon(Icons.add), ), ); diff --git a/lib/tools/ask_me/pages/modal_content.dart b/lib/tools/ask_me/pages/modal_content.dart index 33616c8..afcbc1e 100644 --- a/lib/tools/ask_me/pages/modal_content.dart +++ b/lib/tools/ask_me/pages/modal_content.dart @@ -132,6 +132,7 @@ class _ModalContentState extends State { @override Widget build(BuildContext context) { + final theme = Theme.of(context); // The maximum allowed time in seconds const int maxTimeInSeconds = 1800; // 30 minutes @@ -238,20 +239,11 @@ class _ModalContentState extends State { const SizedBox( height: 5, ), - Row( - children: [ - FilledButton( - onPressed: () async { - await _pickFile(); - }, - style: FilledButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(20.0), - ), - ), - child: const Text("Upload a File"), - ), - ], + OutlinedButton( + onPressed: () async { + await _pickFile(); + }, + child: const Text("Upload a File"), ), if (_filePath != null) Padding( @@ -267,11 +259,6 @@ class _ModalContentState extends State { height: 45, ) : FilledButton( - style: FilledButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(30.0), - ), - ), onPressed: () async { int? minuteValue = int.tryParse(minuteController.text); diff --git a/lib/tools/ask_me/pages/question_screen.dart b/lib/tools/ask_me/pages/question_screen.dart index 87ce9b2..b84ba93 100644 --- a/lib/tools/ask_me/pages/question_screen.dart +++ b/lib/tools/ask_me/pages/question_screen.dart @@ -210,241 +210,197 @@ class _QuestionScreenState extends State { : ''; int minutes = _timeLeft ~/ 60; int seconds = _timeLeft % 60; + final theme = Theme.of(context); return Scaffold( body: Column( children: [ - Expanded( - flex: 1, - child: Column( + Padding( + padding: const EdgeInsets.fromLTRB(16, 30, 16, 30), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Padding( - padding: const EdgeInsets.fromLTRB(16, 30, 16, 30), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - IconButton( - onPressed: () { - showDialog( - context: context, - builder: (BuildContext context) { - return AlertDialog( - title: const Text("Confirm Exit"), - content: const Text( - "Are you sure you want to quit?"), - actions: [ - TextButton( - onPressed: () { - // Dismiss the dialog and stay on the current screen - Navigator.of(context).pop(); - }, - child: const Text("Cancel"), - ), - TextButton( - onPressed: () { - // Dismiss the dialog and navigate to the previous screen - Navigator.of(context) - .pop(); // Dismiss the dialog first - Navigator.pop( - context); // Then pop the current screen - }, - child: const Text("Quit"), - ), - ], - ); - }, - ); - }, - icon: const Icon(Icons.arrow_back), - ), - Text( - "${currentIndex + 1} of ${questions.length}", - style: const TextStyle(fontSize: 18), - ), - Text( - "${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}", - style: const TextStyle(fontSize: 18), - ), - ], - ), + IconButton( + onPressed: () { + showDialog( + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: const Text("Confirm Exit"), + content: const Text("Are you sure you want to quit?"), + actions: [ + TextButton( + onPressed: () { + // Dismiss the dialog and stay on the current screen + Navigator.of(context).pop(); + }, + child: const Text("Cancel"), + ), + TextButton( + onPressed: () { + // Dismiss the dialog and navigate to the previous screen + Navigator.of(context) + .pop(); // Dismiss the dialog first + Navigator.pop( + context); // Then pop the current screen + }, + child: const Text("Quit"), + ), + ], + ); + }, + ); + }, + icon: const Icon(Icons.arrow_back), ), - Padding( - padding: const EdgeInsets.all(16.0), - child: LinearProgressIndicator( - value: progressvalue / questions.length, - minHeight: 10, - backgroundColor: const Color(0xFF006399), - valueColor: - const AlwaysStoppedAnimation(Color(0xFF934171)), - ), + Text( + "${currentIndex + 1} of ${questions.length}", + style: const TextStyle(fontSize: 18), + ), + Text( + "${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}", + style: const TextStyle(fontSize: 18), ), ], ), ), - Expanded( - flex: 3, - child: Stack( - alignment: Alignment.center, + Padding( + padding: const EdgeInsets.all(16.0), + child: LinearProgressIndicator( + value: progressvalue / questions.length, + minHeight: 10, + backgroundColor: theme.colorScheme.secondaryContainer, + valueColor: + AlwaysStoppedAnimation(theme.colorScheme.primary), + ), + ), + const Spacer(), + Container( + padding: const EdgeInsets.all(20), + margin: const EdgeInsets.symmetric(horizontal: 16.0), + decoration: BoxDecoration( + color: theme.colorScheme.surface, + borderRadius: BorderRadius.circular(20), + boxShadow: [ + BoxShadow( + color: theme.colorScheme.outlineVariant, + spreadRadius: 5, + blurRadius: 7, + offset: const Offset(0, 3), + ), + ], + ), + child: Column( + mainAxisSize: MainAxisSize.min, children: [ - Positioned.fill( - child: Column( - children: [ - Expanded( - child: Container( - color: Colors.white, - ), - ), - Expanded( - child: Container( - color: const Color(0xFF006399), - ), - ), - ], + Flexible( + child: Text( + questionText, + style: const TextStyle(fontSize: 18), ), ), - Container( - padding: const EdgeInsets.all(20), - margin: const EdgeInsets.symmetric(horizontal: 16.0), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(20), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 5, - blurRadius: 7, - offset: const Offset(0, 3), - ), - ], - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Flexible( - child: Text( - questionText, - style: const TextStyle(fontSize: 18), + const SizedBox(height: 20), + Wrap( + spacing: 8.0, + runSpacing: 8.0, + children: List.generate(choices.length, (index) { + return GestureDetector( + onTap: () { + setState(() { + selectedOptionIndex = index; + }); + }, + child: Container( + width: MediaQuery.of(context).size.width * 0.85, + padding: const EdgeInsets.all(10.0), + decoration: BoxDecoration( + color: selectedOptionIndex == index + ? theme.colorScheme.primaryContainer + : theme.colorScheme.surface, + border: Border.all( + color: theme.colorScheme.outline, + ), + borderRadius: BorderRadius.circular(10), ), - ), - const SizedBox(height: 20), - Wrap( - spacing: 8.0, - runSpacing: 8.0, - children: List.generate(choices.length, (index) { - return GestureDetector( - onTap: () { - setState(() { - selectedOptionIndex = index; - }); - }, - child: Container( - width: MediaQuery.of(context).size.width * 0.85, - padding: const EdgeInsets.all(10.0), - decoration: BoxDecoration( - color: selectedOptionIndex == index - ? Colors.blue.shade100 - : Colors.white, - border: Border.all( - color: Colors.grey, - ), - borderRadius: BorderRadius.circular(10), - ), - child: Row( - children: [ - Radio( - value: index, - groupValue: selectedOptionIndex, - onChanged: (value) { - setState(() { - selectedOptionIndex = value; - }); - }, - ), - Expanded( - child: Text( - choices[index], - style: const TextStyle(fontSize: 14), - ), - ), - if (isAnswered) - Icon( - choices[index] == correctAnswer - ? Icons.check - : Icons.close, - color: choices[index] == correctAnswer - ? Colors.green - : Colors.red, - ), - ], - ), + child: Row( + children: [ + Radio( + value: index, + groupValue: selectedOptionIndex, + onChanged: (value) { + setState(() { + selectedOptionIndex = value; + }); + }, ), - ); - }), - ), - if (isAnswered) - Padding( - padding: const EdgeInsets.only(top: 10.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Text( - 'Correct Answer:', - style: TextStyle( - fontSize: 16, fontWeight: FontWeight.bold), + Expanded( + child: Text( + choices[index], + style: const TextStyle(fontSize: 14), ), - Flexible( - child: Text( - correctAnswer, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.bold), - maxLines: null, - ), + ), + if (isAnswered) + Icon( + choices[index] == correctAnswer + ? Icons.check + : Icons.close, + color: choices[index] == correctAnswer + ? Colors.green + : Colors.red, ), - ], + ], + ), + ), + ); + }), + ), + if (isAnswered) + Padding( + padding: const EdgeInsets.only(top: 10.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text( + 'Correct Answer:', + style: TextStyle( + fontSize: 16, fontWeight: FontWeight.bold), + ), + Flexible( + child: Text( + correctAnswer, + style: const TextStyle( + fontSize: 16, fontWeight: FontWeight.bold), + maxLines: null, ), ), - ], + ], + ), ), - ), ], ), ), - Expanded( - flex: 1, - child: Container( - color: const Color(0xFF006399), - child: Align( - alignment: Alignment.bottomCenter, - child: Padding( - padding: const EdgeInsets.all(16.0), - child: ElevatedButton( - onPressed: isNextButton - ? (currentIndex == questions.length - 1 - ? () { - setState(() { - isNextButton = false; - _saveScores(); - Navigator.pushReplacement( - context, - MaterialPageRoute( - builder: (context) => - ScoreSection(score: score)), - ); - }); - } - : _nextQuestion) - : _submitAnswer, - child: Text( - isNextButton - ? (currentIndex == questions.length - 1 - ? "Score" - : "Next") - : "Submit", - ), - ), - ), - ), + const Spacer(), + FilledButton( + onPressed: isNextButton + ? (currentIndex == questions.length - 1 + ? () { + setState(() { + isNextButton = false; + _saveScores(); + Navigator.pushReplacement( + context, + MaterialPageRoute( + builder: (context) => + ScoreSection(score: score)), + ); + }); + } + : _nextQuestion) + : _submitAnswer, + child: Text( + isNextButton + ? (currentIndex == questions.length - 1 ? "Score" : "Next") + : "Submit", ), ), ], diff --git a/lib/tools/ask_me/pages/score_section.dart b/lib/tools/ask_me/pages/score_section.dart index 052f36d..1126542 100644 --- a/lib/tools/ask_me/pages/score_section.dart +++ b/lib/tools/ask_me/pages/score_section.dart @@ -23,123 +23,69 @@ class ScoreSection extends StatelessWidget { quotes = 'Outstanding, You’ve Really Excelled!'; emoji = '🏆'; } - return Scaffold( - // appBar: AppBar( - // title: const Text("The End"), - // ), body: Column( children: [ - Expanded( - flex: 2, - child: Image.asset( - 'assets/images/congratulations_askMe.jpeg', - width: 400, - fit: BoxFit.cover, + Image.asset( + 'assets/images/congratulations_askMe.jpeg', + fit: BoxFit.fill, + ), + const Spacer(), + const Text( + "Congratulations", + style: TextStyle( + fontSize: 22, + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(height: 8), + const Text( + "You completed the test!", + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w300, ), ), - Expanded( - flex: 3, - child: Stack( - alignment: Alignment.center, - children: [ - Positioned.fill( - child: Column( - children: [ - Expanded( - flex: 1, - child: Container( - //color: const Color(0xFFB9D9EB), - color: const Color(0xFF006399), - ), - ), - Expanded( - flex: 1, - child: Container( - color: const Color(0xFF006399), - ), - ), - ], - ), - ), - Container( - padding: const EdgeInsets.all(20), - margin: const EdgeInsets.symmetric(horizontal: 16.0), - width: 500, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(20), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 5, - blurRadius: 7, - offset: const Offset(0, 3), - ), - ], - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - const Text( - "Congratulations", - style: TextStyle( - fontSize: 22, fontWeight: FontWeight.bold), - ), - const SizedBox(height: 8), - const Text( - "You completed the test!", - style: TextStyle( - fontSize: 18, fontWeight: FontWeight.w300), - ), - const SizedBox(height: 20), - Text( - "your score".toUpperCase(), - style: const TextStyle( - fontSize: 18, fontWeight: FontWeight.bold), - ), - const SizedBox(height: 10), - Text( - "$score/10", - style: const TextStyle( - fontSize: 24, fontWeight: FontWeight.bold), - ), - const SizedBox(height: 10), - Text( - emoji, - style: const TextStyle(fontSize: 30), - ), - const SizedBox(height: 10), - Text( - quotes, - style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w300), - ), - ], - ), - ), - ], + const SizedBox(height: 20), + Text( + "your score".toUpperCase(), + style: const TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, ), ), - Container( - height: 100, - color: const Color(0xFF006399), - child: Align( - alignment: Alignment.bottomCenter, - child: Padding( - padding: const EdgeInsets.all(16.0), - child: ElevatedButton( - onPressed: () { - Navigator.pushReplacement( - context, - MaterialPageRoute( - builder: (context) => const AskMeHome()), - ); - }, - child: const Text("Complete"), - ), - ), + const SizedBox(height: 10), + Text( + "$score/10", + style: const TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, ), ), + const SizedBox(height: 10), + Text( + emoji, + style: const TextStyle(fontSize: 30), + ), + const SizedBox(height: 10), + Text( + quotes, + style: const TextStyle( + fontSize: 18, + fontWeight: FontWeight.w300, + // + ), + ), + const Spacer(), + FilledButton( + onPressed: () { + Navigator.pushReplacement( + context, + MaterialPageRoute(builder: (context) => const AskMeHome()), + ); + }, + child: const Text("Complete"), + ), ], ), ); diff --git a/lib/tools/ask_me/widgets/choice_widget.dart b/lib/tools/ask_me/widgets/choice_widget.dart index 563344e..2401913 100644 --- a/lib/tools/ask_me/widgets/choice_widget.dart +++ b/lib/tools/ask_me/widgets/choice_widget.dart @@ -11,14 +11,17 @@ class ChoiceWidget extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = Theme.of(context); return Obx(() => ChoiceChip( label: Text(label), selected: settingsController.questionType.value == label, onSelected: (bool selected) { settingsController.setQuestionType(label, multipleChoice); }, - selectedColor: Colors.pink[100], - backgroundColor: Colors.grey[100], + // selectedColor: Colors.pink[100], + // backgroundColor: Colors.grey[100], + selectedColor: theme.colorScheme.tertiaryContainer, + backgroundColor: theme.colorScheme.secondaryContainer, )); } } \ No newline at end of file From 771a9d23d1edec311b74e00fc07da2e73c9cac5c Mon Sep 17 00:00:00 2001 From: Eugene600 Date: Sat, 26 Oct 2024 00:38:30 +0300 Subject: [PATCH 3/3] Fixed text overflow issue in the container in the question sreen in Ask Me --- lib/tools/ask_me/pages/question_screen.dart | 27 +++++++++------------ 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/lib/tools/ask_me/pages/question_screen.dart b/lib/tools/ask_me/pages/question_screen.dart index b84ba93..8eb2840 100644 --- a/lib/tools/ask_me/pages/question_screen.dart +++ b/lib/tools/ask_me/pages/question_screen.dart @@ -1,6 +1,8 @@ import 'dart:async'; +import 'package:academia/exports/barrel.dart'; import 'package:academia/tools/tools.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; import 'package:get/get.dart'; import '../controllers/controllers.dart'; import '../models/models.dart'; @@ -357,23 +359,16 @@ class _QuestionScreenState extends State { if (isAnswered) Padding( padding: const EdgeInsets.only(top: 10.0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Text( - 'Correct Answer:', - style: TextStyle( - fontSize: 16, fontWeight: FontWeight.bold), + child: Align( + alignment: Alignment.centerLeft, + child: Text( + 'Correct Answer is $correctAnswer', + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, ), - Flexible( - child: Text( - correctAnswer, - style: const TextStyle( - fontSize: 16, fontWeight: FontWeight.bold), - maxLines: null, - ), - ), - ], + maxLines: 2, + ), ), ), ],