From fd0dd63bb7d9e08dad700b66290ab9bc6993d3d6 Mon Sep 17 00:00:00 2001 From: Mirza Widihananta Date: Fri, 17 Nov 2023 08:25:10 +0700 Subject: [PATCH] fix: adjust display in large screen --- .../main/presentation/pages/main_page.dart | 36 ++--- .../main/presentation/pages/setting_page.dart | 13 +- .../presentation/pages/material_menu.dart | 8 +- .../presentation/pages/splash_screen.dart | 30 ++--- .../pages/quiz_exercise_page.dart | 45 ++++--- .../presentation/pages/_pages.dart | 1 + .../pages/quiz_registration_page.dart | 9 +- .../presentation/pages/_pages.dart | 1 + .../presentation/pages/quiz_result_page.dart | 126 ++++++++++-------- .../presentation/pages/quiz_start_page.dart | 4 +- 10 files changed, 148 insertions(+), 125 deletions(-) diff --git a/app/lib/features/main/presentation/pages/main_page.dart b/app/lib/features/main/presentation/pages/main_page.dart index 6d3dd3b..9141f9f 100644 --- a/app/lib/features/main/presentation/pages/main_page.dart +++ b/app/lib/features/main/presentation/pages/main_page.dart @@ -30,7 +30,6 @@ class _MainPageState extends State { Padding( padding: const EdgeInsets.all(32), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: [ Image.asset( Assets.bebrasPandaiText, @@ -40,18 +39,21 @@ class _MainPageState extends State { ), BlocBuilder(builder: (context, state) { if (state is MainSuccess) { - return RichText( - text: TextSpan( - text: 'Selamat Datang\n', - style: FontTheme.blackTitle(), - children: [ - TextSpan( - text: toBeginningOfSentenceCase( - '${state.userData['name']}!', + return Align( + alignment: Alignment.centerLeft, + child: RichText( + text: TextSpan( + text: 'Selamat Datang\n', + style: FontTheme.blackTitle(), + children: [ + TextSpan( + text: toBeginningOfSentenceCase( + '${state.userData['name']}!', + ), + style: FontTheme.blackTitleBold(), ), - style: FontTheme.blackTitleBold(), - ), - ], + ], + ), ), ); } @@ -74,7 +76,7 @@ class _MainPageState extends State { text: 'ℹ️ Tentang Tantangan Bebras ℹ️', ), const SizedBox( - height: 20, + height: 25, ), Button( buttonType: ButtonType.primary, @@ -84,7 +86,7 @@ class _MainPageState extends State { text: 'Lihat / Cetak Materi', ), const SizedBox( - height: 20, + height: 25, ), Button( buttonType: ButtonType.primary, @@ -94,7 +96,7 @@ class _MainPageState extends State { text: 'Ikut Latihan Mingguan', ), const SizedBox( - height: 20, + height: 25, ), Button( onTap: () async { @@ -104,8 +106,8 @@ class _MainPageState extends State { customTextColor: Colors.white, text: 'Pengaturan', ), - const SizedBox( - height: 255, + SizedBox( + height: MediaQuery.of(context).size.height - 620, ), InkWell( onTap: () async { diff --git a/app/lib/features/main/presentation/pages/setting_page.dart b/app/lib/features/main/presentation/pages/setting_page.dart index a1a28c2..2311e9e 100644 --- a/app/lib/features/main/presentation/pages/setting_page.dart +++ b/app/lib/features/main/presentation/pages/setting_page.dart @@ -21,7 +21,6 @@ class _SettingPageState extends State { Padding( padding: const EdgeInsets.all(32), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: [ Image.asset( Assets.bebrasPandaiText, @@ -44,7 +43,7 @@ class _SettingPageState extends State { text: 'Edit Profil', ), const SizedBox( - height: 20, + height: 25, ), Button( onTap: () async { @@ -60,7 +59,7 @@ class _SettingPageState extends State { text: 'Hapus Akun', ), const SizedBox( - height: 40, + height: 50, ), Button( buttonType: ButtonType.primary, @@ -75,7 +74,7 @@ class _SettingPageState extends State { text: 'Kebijakan Privasi', ), const SizedBox( - height: 20, + height: 25, ), Button( onTap: () async { @@ -90,8 +89,8 @@ class _SettingPageState extends State { customTextColor: Colors.white, text: 'Bantu Donasi 💌', ), - const SizedBox( - height: 200, + SizedBox( + height: MediaQuery.of(context).size.height - 695, ), Button( onTap: () async { @@ -104,7 +103,7 @@ class _SettingPageState extends State { text: 'Keluar', ), const SizedBox( - height: 40, + height: 50, ), InkWell( onTap: () async { diff --git a/app/lib/features/material/menu/presentation/pages/material_menu.dart b/app/lib/features/material/menu/presentation/pages/material_menu.dart index 82a3623..8340b68 100644 --- a/app/lib/features/material/menu/presentation/pages/material_menu.dart +++ b/app/lib/features/material/menu/presentation/pages/material_menu.dart @@ -129,7 +129,7 @@ class _MaterialMenuState extends State { ), SizedBox( height: 40, - width: MediaQuery.of(context).size.height - 10, + width: MediaQuery.of(context).size.width - 10, child: ListView( scrollDirection: Axis.horizontal, children: [ @@ -160,12 +160,14 @@ class _MaterialMenuState extends State { } if (snapshot.connectionState == ConnectionState.waiting) { - return const Text('Loading'); + return const Center( + child: CircularProgressIndicator(), + ); } var displayEmpty = true; final boxHeight = - MediaQuery.of(context).size.height * 0.65; + MediaQuery.of(context).size.height - 320; return SingleChildScrollView( child: SizedBox( height: boxHeight, diff --git a/app/lib/features/onboarding/presentation/pages/splash_screen.dart b/app/lib/features/onboarding/presentation/pages/splash_screen.dart index ef7c291..bc19b76 100644 --- a/app/lib/features/onboarding/presentation/pages/splash_screen.dart +++ b/app/lib/features/onboarding/presentation/pages/splash_screen.dart @@ -17,30 +17,20 @@ class SplashScreen extends StatelessWidget { } }, child: Scaffold( - body: Column( - children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 12), - child: Container( - height: size.width * 0.8, - width: size.width * 0.8, - alignment: Alignment.center, - decoration: const BoxDecoration( - image: DecorationImage( - image: AssetImage( - Assets.logo, - ), - fit: BoxFit.contain, - ), - ), + body: Center( + child: Container( + height: size.width * 0.75, + width: size.width * 0.75, + decoration: const BoxDecoration( + image: DecorationImage( + image: AssetImage( + Assets.logo, ), + fit: BoxFit.contain, ), ), - ], + ), ), - // safeArea: false, - // padding: false, ), ); } diff --git a/app/lib/features/quiz_exercise/presentation/pages/quiz_exercise_page.dart b/app/lib/features/quiz_exercise/presentation/pages/quiz_exercise_page.dart index 0f609fa..dddf113 100644 --- a/app/lib/features/quiz_exercise/presentation/pages/quiz_exercise_page.dart +++ b/app/lib/features/quiz_exercise/presentation/pages/quiz_exercise_page.dart @@ -60,7 +60,9 @@ class _QuizExercisePageState extends State { return state is! QuizExerciseFinished; }, builder: (context, state) { if (state is QuizExerciseLoading) { - return const Text('LOADING'); + return const Center( + child: CircularProgressIndicator(), + ); } if (state is QuizExerciseFailed) { return Text(state.error); @@ -197,34 +199,39 @@ class _QuizExercisePageState extends State { index++; return RadioListTile( - title: SizedBox( - width: 100, + title: SizedBox( + child: Transform.translate( + offset: const Offset( + -20, + 0, + ), // Set the desired offset child: Row( children: [ - Text( - current, - style: const TextStyle(fontSize: 12), - ), - const SizedBox( - width: 10, - ), + Text('$current. '), state.quizExercise.type == 'MULTIPLE_CHOICE_IMAGE' ? Image.network( e.content, - width: 140, + width: MediaQuery.of(context) + .size + .width - + 240, + ) + : Flexible( + child: Text(e.content), ) - : Text(e.content), ], ), ), - value: e.id, - groupValue: state.selectedAnswer, - onChanged: (value) { - context - .read() - .selectAnswer(e.id); - }); + ), + value: e.id, + groupValue: state.selectedAnswer, + onChanged: (value) { + context + .read() + .selectAnswer(e.id); + }, + ); }), state.quizExercise.type == 'SHORT_ANSWER' ? Container( diff --git a/app/lib/features/quiz_registration/presentation/pages/_pages.dart b/app/lib/features/quiz_registration/presentation/pages/_pages.dart index 006830b..d61c310 100644 --- a/app/lib/features/quiz_registration/presentation/pages/_pages.dart +++ b/app/lib/features/quiz_registration/presentation/pages/_pages.dart @@ -6,6 +6,7 @@ import '../../../../core/bases/enum/button_type.dart'; import '../../../../core/bases/widgets/atoms/button.dart'; import '../../../../core/bases/widgets/layout/bebras_scaffold.dart'; import '../../../../core/constants/assets.dart'; +import '../../../../core/theme/font_theme.dart'; import '../../../../models/quiz_participation.dart'; import '../../../../services/quiz_service.dart'; import '../bloc/quiz_registration_cubit.dart'; diff --git a/app/lib/features/quiz_registration/presentation/pages/quiz_registration_page.dart b/app/lib/features/quiz_registration/presentation/pages/quiz_registration_page.dart index c1e68a0..f4559b1 100644 --- a/app/lib/features/quiz_registration/presentation/pages/quiz_registration_page.dart +++ b/app/lib/features/quiz_registration/presentation/pages/quiz_registration_page.dart @@ -308,7 +308,6 @@ class _QuizRegistrationPageState extends State { Padding( padding: const EdgeInsets.all(32), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: [ Image.asset( Assets.bebrasPandaiText, @@ -316,7 +315,13 @@ class _QuizRegistrationPageState extends State { const SizedBox( height: 40, ), - const Text('Latihan yang pernah diikuti'), + Align( + alignment: Alignment.centerLeft, + child: Text( + 'Latihan yang pernah diikuti', + style: FontTheme.blackSubtitleBold(), + ), + ), BlocConsumer( listener: (context, state) { if (state is QuizRegistrationSuccess) { diff --git a/app/lib/features/quiz_result/presentation/pages/_pages.dart b/app/lib/features/quiz_result/presentation/pages/_pages.dart index 7aa4aad..4b20635 100644 --- a/app/lib/features/quiz_result/presentation/pages/_pages.dart +++ b/app/lib/features/quiz_result/presentation/pages/_pages.dart @@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import '../../../../core/bases/widgets/layout/bebras_scaffold.dart'; import '../../../../core/constants/assets.dart'; +import '../../../../core/theme/font_theme.dart'; import '../bloc/quiz_result_cubit.dart'; part 'quiz_result_page.dart'; diff --git a/app/lib/features/quiz_result/presentation/pages/quiz_result_page.dart b/app/lib/features/quiz_result/presentation/pages/quiz_result_page.dart index 06640c6..db1e5bb 100644 --- a/app/lib/features/quiz_result/presentation/pages/quiz_result_page.dart +++ b/app/lib/features/quiz_result/presentation/pages/quiz_result_page.dart @@ -21,67 +21,81 @@ class _QuizResultPageState extends State { @override Widget build(BuildContext context) { return BebrasScaffold( - body: SingleChildScrollView( - child: Stack(children: [ - Padding( - padding: const EdgeInsets.all(32), - child: Column( - children: [ - Image.asset( - Assets.bebrasPandaiText, - ), - const SizedBox( - height: 40, - ), - BlocBuilder( - builder: (context, state) { - if (state is QuizResultAvailable) { - return Column( - children: [ - const Text('LATIHAN SELESAI'), - const SizedBox( - height: 20, - ), - Image.asset( - Assets.logo, - ), - const SizedBox( - height: 20, - ), - Container( - padding: const EdgeInsets.all(16), - decoration: BoxDecoration( - border: Border.all(), color: Colors.grey), + body: SingleChildScrollView( + child: Stack( + children: [ + Padding( + padding: const EdgeInsets.all(32), + child: Column( + children: [ + Image.asset( + Assets.bebrasPandaiText, + ), + const SizedBox( + height: 40, + ), + BlocBuilder( + builder: (context, state) { + if (state is QuizResultAvailable) { + return SizedBox( + width: double.infinity, child: Column( children: [ - Text('Total Nilai: ${state.attempt.score}'), Text( - 'benar: ${state.attempt.totalCorrect}, salah: ${state.attempt.totalIncorrect + state.attempt.totalBlank}'), - const Text('MANTAP!!!') + 'LATIHAN SELESAI', + style: FontTheme.blackTitleBold(), + ), + const SizedBox( + height: 20, + ), + Image.asset( + Assets.logo, + ), + const SizedBox( + height: 20, + ), + Container( + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + border: Border.all(), color: Colors.grey), + child: Column( + children: [ + Text('Total Nilai: ${state.attempt.score}'), + Text( + 'benar: ${state.attempt.totalCorrect}, salah: ${state.attempt.totalIncorrect + state.attempt.totalBlank}'), + const Text('MANTAP!!!') + ], + ), + ), + SizedBox( + height: + MediaQuery.of(context).size.height - 750, + ), + const Text( + 'Sampai jumpa di Latihan Bebras selanjutnya', + style: TextStyle( + fontWeight: FontWeight.bold, + ), + ), ], ), - ), - const SizedBox( - height: 20, - ), - const Text( - 'Sampai jumpa di Latihan Bebras selanjutnya'), - ], - ); - } - if (state is QuizResultNotAvailable) { - return const Text('Result not available'); - } - if (state is QuizResultFailed) { - return Text(state.error); - } - return Container(); - }, - ) - ], - ), + ); + } + if (state is QuizResultNotAvailable) { + return const Text('Result not available'); + } + if (state is QuizResultFailed) { + return Text(state.error); + } + return Container(); + }, + ) + ], + ), + ), + ], ), - ]), - )); + ), + ); } } diff --git a/app/lib/features/quiz_start/presentation/pages/quiz_start_page.dart b/app/lib/features/quiz_start/presentation/pages/quiz_start_page.dart index 22aebdf..92b929a 100644 --- a/app/lib/features/quiz_start/presentation/pages/quiz_start_page.dart +++ b/app/lib/features/quiz_start/presentation/pages/quiz_start_page.dart @@ -42,7 +42,9 @@ class _QuizStartPageState extends State { if (state is QuizStartFailed) { return Text(state.error); } - return const Text('OK'); + return const Center( + child: CircularProgressIndicator(), + ); }, ), ],