From 51e2c63134d4f5534ccd21fead9e73ada465022d Mon Sep 17 00:00:00 2001 From: kima Date: Sun, 25 Jun 2023 14:36:18 +0200 Subject: [PATCH] fixed navigation and ui bugs in summary --- .../lib/pages/home/live_card/live_card.dart | 50 ++-- .../screens/summary/pages/grades_page.dart | 279 +++++++++--------- .../screens/summary/pages/lessons_page.dart | 52 ++-- .../summary/pages/personality_page.dart | 13 +- .../lib/screens/summary/pages/start_page.dart | 2 +- .../lib/screens/summary/summary_screen.dart | 216 +++++++------- 6 files changed, 315 insertions(+), 297 deletions(-) diff --git a/filcnaplo_mobile_ui/lib/pages/home/live_card/live_card.dart b/filcnaplo_mobile_ui/lib/pages/home/live_card/live_card.dart index 01a14ce..94840aa 100755 --- a/filcnaplo_mobile_ui/lib/pages/home/live_card/live_card.dart +++ b/filcnaplo_mobile_ui/lib/pages/home/live_card/live_card.dart @@ -13,7 +13,6 @@ import 'package:flutter_feather_icons/flutter_feather_icons.dart'; import 'package:i18n_extension/i18n_widget.dart'; import 'package:intl/intl.dart'; import 'package:provider/provider.dart'; -import 'package:wtf_sliding_sheet/wtf_sliding_sheet.dart'; import 'live_card.i18n.dart'; class LiveCard extends StatefulWidget { @@ -68,30 +67,31 @@ class _LiveCardState extends State { ), ), onTap: () { - showSlidingBottomSheet( - context, - useRootNavigator: true, - builder: (context) => SlidingSheetDialog( - color: Colors.black.withOpacity(0.99), - duration: const Duration(milliseconds: 400), - scrollSpec: const ScrollSpec.bouncingScroll(), - snapSpec: const SnapSpec( - snap: true, - snappings: [1.0], - initialSnap: 1.0, - positioning: SnapPositioning.relativeToAvailableSpace, - ), - minHeight: MediaQuery.of(context).size.height, - cornerRadius: 16, - cornerRadiusOnFullscreen: 0, - builder: (context, state) => const Material( - color: Colors.black, - child: SummaryScreen( - currentPage: 'start', - ), - ), - ), - ); + // showSlidingBottomSheet( + // context, + // useRootNavigator: true, + // builder: (context) => SlidingSheetDialog( + // color: Colors.black.withOpacity(0.99), + // duration: const Duration(milliseconds: 400), + // scrollSpec: const ScrollSpec.bouncingScroll(), + // snapSpec: const SnapSpec( + // snap: true, + // snappings: [1.0], + // initialSnap: 1.0, + // positioning: SnapPositioning.relativeToAvailableSpace, + // ), + // minHeight: MediaQuery.of(context).size.height, + // cornerRadius: 16, + // cornerRadiusOnFullscreen: 0, + // builder: (context, state) => const Material( + // color: Colors.black, + // child: SummaryScreen( + // currentPage: 'start', + // ), + // ), + // ), + // ); + SummaryScreen.show(context: context, currentPage: 'start'); }, ); break; diff --git a/filcnaplo_mobile_ui/lib/screens/summary/pages/grades_page.dart b/filcnaplo_mobile_ui/lib/screens/summary/pages/grades_page.dart index 3153ab0..f37a887 100644 --- a/filcnaplo_mobile_ui/lib/screens/summary/pages/grades_page.dart +++ b/filcnaplo_mobile_ui/lib/screens/summary/pages/grades_page.dart @@ -198,163 +198,164 @@ class _GradesBodyState extends State { getGrades(); - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - height: ((100 * subjectTiles5.length) / - (subjectTiles5[0].runtimeType == AnimatedContainer - ? 1.95 - : 1.2)) - .toDouble(), - child: ListView.builder( - padding: const EdgeInsets.only(left: 5), - physics: const BouncingScrollPhysics(), - itemCount: max(subjectTiles5.length, 1), - itemBuilder: (context, index) { - if (subjectTiles5.isNotEmpty) { - EdgeInsetsGeometry panelPadding = - const EdgeInsets.symmetric(horizontal: 24.0); + return Expanded( + child: ListView( + children: [ + SizedBox( + height: ((100 * subjectTiles5.length) / + (subjectTiles5[0].runtimeType == AnimatedContainer + ? 1.95 + : 1.2)) + .toDouble(), + child: ListView.builder( + padding: const EdgeInsets.only(left: 5), + physics: const BouncingScrollPhysics(), + itemCount: max(subjectTiles5.length, 1), + itemBuilder: (context, index) { + if (subjectTiles5.isNotEmpty) { + EdgeInsetsGeometry panelPadding = + const EdgeInsets.symmetric(horizontal: 24.0); - if (subjectTiles5[index].runtimeType == AnimatedContainer) { - return Padding( - padding: const EdgeInsets.only(top: 8), - child: subjectTiles5[index]); + if (subjectTiles5[index].runtimeType == AnimatedContainer) { + return Padding( + padding: const EdgeInsets.only(top: 8), + child: subjectTiles5[index]); + } else { + return Padding( + padding: panelPadding, child: subjectTiles5[index]); + } } else { - return Padding( - padding: panelPadding, child: subjectTiles5[index]); + return Container(); } - } else { - return Container(); - } - }, + }, + ), ), - ), - const SizedBox(height: 12.0), - Text( - 'tryagain'.i18n, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 22.0, - color: Colors.white, + const SizedBox(height: 12.0), + Text( + 'tryagain'.i18n, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22.0, + color: Colors.white, + ), ), - ), - const SizedBox(height: 12.0), - SizedBox( - height: ((100 * subjectTiles3.length) / - (subjectTiles3[0].runtimeType == AnimatedContainer - ? 1.95 - : 1.2)) - .toDouble(), - child: ListView.builder( - padding: const EdgeInsets.only(left: 5), - physics: const BouncingScrollPhysics(), - itemCount: max(subjectTiles3.length, 1), - itemBuilder: (context, index) { - if (subjectTiles3.isNotEmpty) { - EdgeInsetsGeometry panelPadding = - const EdgeInsets.symmetric(horizontal: 24.0); + const SizedBox(height: 12.0), + SizedBox( + height: ((100 * subjectTiles3.length) / + (subjectTiles3[0].runtimeType == AnimatedContainer + ? 1.95 + : 1.2)) + .toDouble(), + child: ListView.builder( + padding: const EdgeInsets.only(left: 5), + physics: const BouncingScrollPhysics(), + itemCount: max(subjectTiles3.length, 1), + itemBuilder: (context, index) { + if (subjectTiles3.isNotEmpty) { + EdgeInsetsGeometry panelPadding = + const EdgeInsets.symmetric(horizontal: 24.0); - if (subjectTiles3[index].runtimeType == AnimatedContainer) { - return Padding( - padding: const EdgeInsets.only(top: 8), - child: subjectTiles3[index]); + if (subjectTiles3[index].runtimeType == AnimatedContainer) { + return Padding( + padding: const EdgeInsets.only(top: 8), + child: subjectTiles3[index]); + } else { + return Padding( + padding: panelPadding, child: subjectTiles3[index]); + } } else { - return Padding( - padding: panelPadding, child: subjectTiles3[index]); + return Container(); } - } else { - return Container(); - } - }, + }, + ), ), - ), - const SizedBox(height: 12.0), - Text( - 'oops'.i18n, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 22.0, - color: Colors.white, + const SizedBox(height: 12.0), + Text( + 'oops'.i18n, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22.0, + color: Colors.white, + ), ), - ), - const SizedBox(height: 12.0), - SizedBox( - height: ((100 * subjectTiles1.length) / - (subjectTiles1[0].runtimeType == AnimatedContainer - ? 1.95 - : 1.2)) - .toDouble(), - child: ListView.builder( - padding: const EdgeInsets.only(left: 5), - physics: const BouncingScrollPhysics(), - itemCount: max(subjectTiles1.length, 1), - itemBuilder: (context, index) { - if (subjectTiles1.isNotEmpty) { - EdgeInsetsGeometry panelPadding = - const EdgeInsets.symmetric(horizontal: 24.0); + const SizedBox(height: 12.0), + SizedBox( + height: ((100 * subjectTiles1.length) / + (subjectTiles1[0].runtimeType == AnimatedContainer + ? 1.95 + : 1.2)) + .toDouble(), + child: ListView.builder( + padding: const EdgeInsets.only(left: 5), + physics: const BouncingScrollPhysics(), + itemCount: max(subjectTiles1.length, 1), + itemBuilder: (context, index) { + if (subjectTiles1.isNotEmpty) { + EdgeInsetsGeometry panelPadding = + const EdgeInsets.symmetric(horizontal: 24.0); - if (subjectTiles1[index].runtimeType == AnimatedContainer) { - return Padding( - padding: const EdgeInsets.only(top: 8), - child: subjectTiles1[index]); + if (subjectTiles1[index].runtimeType == AnimatedContainer) { + return Padding( + padding: const EdgeInsets.only(top: 8), + child: subjectTiles1[index]); + } else { + return Padding( + padding: panelPadding, child: subjectTiles1[index]); + } } else { - return Padding( - padding: panelPadding, child: subjectTiles1[index]); + return Container(); } - } else { - return Container(); - } - }, + }, + ), ), - ), - const SizedBox(height: 40.0), - Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text( - 'endyear_avg'.i18n, - textAlign: TextAlign.center, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 22.0, - color: Colors.white, - ), - ), - Container( - margin: const EdgeInsets.only(top: 10.0), - padding: - const EdgeInsets.symmetric(horizontal: 16.0, vertical: 4.0), - decoration: BoxDecoration( - color: gradeColor(context: context, value: endYearAvg) - .withOpacity(.2), - border: Border.all( - color: (gradeColor(context: context, value: endYearAvg)) - .withOpacity(0.0), - width: 2.0, - ), - borderRadius: BorderRadius.circular(45.0), - ), - child: AutoSizeText.rich( - TextSpan( - text: endYearAvgText, - ), - maxLines: 1, - minFontSize: 5, + const SizedBox(height: 30.0), + Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + 'endyear_avg'.i18n, textAlign: TextAlign.center, - style: TextStyle( - color: gradeColor(context: context, value: endYearAvg), - fontWeight: FontWeight.w800, - fontSize: 32.0, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22.0, + color: Colors.white, ), ), - ), - ], + Container( + margin: const EdgeInsets.only(top: 10.0), + padding: const EdgeInsets.symmetric( + horizontal: 16.0, vertical: 4.0), + decoration: BoxDecoration( + color: gradeColor(context: context, value: endYearAvg) + .withOpacity(.2), + border: Border.all( + color: (gradeColor(context: context, value: endYearAvg)) + .withOpacity(0.0), + width: 2.0, + ), + borderRadius: BorderRadius.circular(45.0), + ), + child: AutoSizeText.rich( + TextSpan( + text: endYearAvgText, + ), + maxLines: 1, + minFontSize: 5, + textAlign: TextAlign.center, + style: TextStyle( + color: gradeColor(context: context, value: endYearAvg), + fontWeight: FontWeight.w800, + fontSize: 32.0, + ), + ), + ), + ], + ), ), - ), - ], + ], + ), ); } } diff --git a/filcnaplo_mobile_ui/lib/screens/summary/pages/lessons_page.dart b/filcnaplo_mobile_ui/lib/screens/summary/pages/lessons_page.dart index 7e3d872..602cb8c 100644 --- a/filcnaplo_mobile_ui/lib/screens/summary/pages/lessons_page.dart +++ b/filcnaplo_mobile_ui/lib/screens/summary/pages/lessons_page.dart @@ -230,34 +230,34 @@ class _LessonsBodyState extends State { getAndSortDelays(); generateTiles(); - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - lessons[0], - const SizedBox(height: 18.0), - Text( - 'dontfelt'.i18n, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 22.0, - color: Colors.white, + return Expanded( + child: ListView( + children: [ + lessons[0], + const SizedBox(height: 18.0), + Text( + 'dontfelt'.i18n, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22.0, + color: Colors.white, + ), ), - ), - const SizedBox(height: 18.0), - lessons[1], - const SizedBox(height: 18.0), - Text( - 'youlate'.i18n, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 22.0, - color: Colors.white, + const SizedBox(height: 18.0), + lessons[1], + const SizedBox(height: 18.0), + Text( + 'youlate'.i18n, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22.0, + color: Colors.white, + ), ), - ), - const SizedBox(height: 18.0), - lessons[2], - ], + const SizedBox(height: 18.0), + lessons[2], + ], + ), ); } } diff --git a/filcnaplo_mobile_ui/lib/screens/summary/pages/personality_page.dart b/filcnaplo_mobile_ui/lib/screens/summary/pages/personality_page.dart index e67f4b8..7702c7a 100644 --- a/filcnaplo_mobile_ui/lib/screens/summary/pages/personality_page.dart +++ b/filcnaplo_mobile_ui/lib/screens/summary/pages/personality_page.dart @@ -58,11 +58,10 @@ class _PersonalityBodyState extends State { Widget build(BuildContext context) { user = Provider.of(context); - return Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.spaceAround, + return Expanded( + child: ListView( children: [ - const SizedBox(height: 60), + const SizedBox(height: 30), AnimatedCrossFade( duration: const Duration(milliseconds: 1000), sizeCurve: Curves.easeInToLinear, @@ -80,7 +79,7 @@ class _PersonalityBodyState extends State { ? CrossFadeState.showFirst : CrossFadeState.showSecond, ), - const SizedBox(height: 40), + const SizedBox(height: 30), if (isRevealed) Center( child: Row( @@ -122,6 +121,8 @@ class _PersonalityBodyState extends State { ), ), const SizedBox(height: 60), - ]); + ], + ), + ); } } diff --git a/filcnaplo_mobile_ui/lib/screens/summary/pages/start_page.dart b/filcnaplo_mobile_ui/lib/screens/summary/pages/start_page.dart index 20ff340..90e807c 100644 --- a/filcnaplo_mobile_ui/lib/screens/summary/pages/start_page.dart +++ b/filcnaplo_mobile_ui/lib/screens/summary/pages/start_page.dart @@ -3,7 +3,6 @@ import 'package:filcnaplo/models/settings.dart'; import 'package:filcnaplo_kreta_api/providers/grade_provider.dart'; import 'package:filcnaplo_mobile_ui/screens/summary/summary_screen.dart'; import 'package:filcnaplo_mobile_ui/screens/summary/summary_screen.i18n.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_feather_icons/flutter_feather_icons.dart'; import 'package:provider/provider.dart'; @@ -61,6 +60,7 @@ class _StartBodyState extends State { color: Colors.black, child: SummaryScreen( currentPage: 'grades', + isBottomSheet: true, ), ), ), diff --git a/filcnaplo_mobile_ui/lib/screens/summary/summary_screen.dart b/filcnaplo_mobile_ui/lib/screens/summary/summary_screen.dart index 76ca49d..7798761 100644 --- a/filcnaplo_mobile_ui/lib/screens/summary/summary_screen.dart +++ b/filcnaplo_mobile_ui/lib/screens/summary/summary_screen.dart @@ -1,6 +1,7 @@ import 'package:confetti/confetti.dart'; import 'package:filcnaplo/api/providers/user_provider.dart'; import 'package:filcnaplo/models/settings.dart'; +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_feather_icons/flutter_feather_icons.dart'; import 'package:provider/provider.dart'; @@ -15,12 +16,22 @@ import 'pages/personality_page.dart'; class SummaryScreen extends StatefulWidget { final String currentPage; + final bool isBottomSheet; - const SummaryScreen({Key? key, this.currentPage = 'personality'}) - : super(key: key); + const SummaryScreen({ + Key? key, + this.currentPage = 'personality', + this.isBottomSheet = false, + }) : super(key: key); @override _SummaryScreenState createState() => _SummaryScreenState(); + + static show( + {required BuildContext context, + String currentPage = 'personality'}) => + Navigator.of(context, rootNavigator: true).push(CupertinoPageRoute( + builder: (context) => SummaryScreen(currentPage: currentPage))); } class _SummaryScreenState extends State @@ -28,7 +39,6 @@ class _SummaryScreenState extends State late UserProvider user; late SettingsProvider settings; - late AnimationController _hideContainersController; ConfettiController? _confettiController; late String firstName; @@ -46,9 +56,6 @@ class _SummaryScreenState extends State @override void initState() { super.initState(); - - _hideContainersController = AnimationController( - vsync: this, duration: const Duration(milliseconds: 200)); } @override @@ -70,106 +77,113 @@ class _SummaryScreenState extends State firstName = "János"; } - return AnimatedBuilder( - animation: _hideContainersController, - builder: (context, child) => Opacity( - opacity: 1 - _hideContainersController.value, - child: Container( - decoration: BoxDecoration(gradient: _backgroundGradient), - child: Container( - decoration: BoxDecoration(gradient: _backgroundGradient), - width: MediaQuery.of(context).size.width, - height: MediaQuery.of(context).size.height, - child: SafeArea( - child: Padding( - padding: EdgeInsets.only( - left: 24.0, - right: 24.0, - top: MediaQuery.of(context).padding.top, - bottom: 52.0, - ), - child: Column( - crossAxisAlignment: widget.currentPage == 'start' - ? CrossAxisAlignment.center - : CrossAxisAlignment.start, - mainAxisAlignment: widget.currentPage == 'start' - ? MainAxisAlignment.spaceBetween - : MainAxisAlignment.start, + return widget.isBottomSheet + ? buildContainer() + : Scaffold( + body: buildContainer(), + ); + } + + Widget buildContainer() { + return Container( + decoration: BoxDecoration(gradient: _backgroundGradient), + child: Container( + decoration: BoxDecoration(gradient: _backgroundGradient), + width: MediaQuery.of(context).size.width, + height: MediaQuery.of(context).size.height, + child: SafeArea( + child: Padding( + padding: const EdgeInsets.only( + left: 24.0, + right: 24.0, + top: 15.0, + bottom: 40.0, + ), + child: Column( + crossAxisAlignment: widget.currentPage == 'start' + ? CrossAxisAlignment.center + : CrossAxisAlignment.start, + mainAxisAlignment: widget.currentPage == 'start' + ? MainAxisAlignment.spaceBetween + : MainAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'greeting'.i18n.fill([firstName]), - textAlign: TextAlign.left, - maxLines: 2, - overflow: TextOverflow.fade, - style: const TextStyle( - fontWeight: FontWeight.w900, - fontSize: 26.0, - color: Colors.white, - ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'greeting'.i18n.fill([firstName]), + textAlign: TextAlign.left, + maxLines: 2, + overflow: TextOverflow.ellipsis, + softWrap: true, + style: const TextStyle( + fontWeight: FontWeight.w900, + fontSize: 26.0, + color: Colors.white, ), - Text( - widget.currentPage == 'start' - ? 'title_start'.i18n - : widget.currentPage == 'grades' - ? 'title_grades'.i18n - : widget.currentPage == 'lessons' - ? 'title_lessons'.i18n - : widget.currentPage == 'personality' - ? 'title_personality'.i18n - : '', - overflow: TextOverflow.fade, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 22.0, - color: Colors.white, - ), + ), + Text( + widget.currentPage == 'start' + ? 'title_start'.i18n + : widget.currentPage == 'grades' + ? 'title_grades'.i18n + : widget.currentPage == 'lessons' + ? 'title_lessons'.i18n + : widget.currentPage == 'personality' + ? 'title_personality'.i18n + : '', + maxLines: 1, + overflow: TextOverflow.fade, + softWrap: false, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22.0, + color: Colors.white, ), - ], - ), - widget.currentPage != 'start' - ? IconButton( - onPressed: () async { - Navigator.of(context).pop(); - if (widget.currentPage == 'grades') { - openNewPage(page: 'lessons'); - } else if (widget.currentPage == 'lessons') { - openNewPage(page: 'allsum'); - } else if (widget.currentPage == 'allsum') { - openNewPage(page: 'personality'); - } else { - Navigator.of(context).maybePop(); - } - }, - icon: Icon( - widget.currentPage == 'personality' - ? FeatherIcons.x - : FeatherIcons.arrowRight, - color: Colors.white, - ), - ) - : Container() - ], + ), + ], + ), ), - const SizedBox(height: 12.0), - widget.currentPage == 'start' - ? const StartBody() - : widget.currentPage == 'grades' - ? const GradesBody() - : widget.currentPage == 'lessons' - ? const LessonsBody() - : widget.currentPage == 'allsum' - ? const AllSumBody() - : const PersonalityBody(), + widget.currentPage != 'start' + ? IconButton( + onPressed: () async { + Navigator.of(context).pop(); + if (widget.currentPage == 'grades') { + openNewPage(page: 'lessons'); + } else if (widget.currentPage == 'lessons') { + openNewPage(page: 'allsum'); + } else if (widget.currentPage == 'allsum') { + openNewPage(page: 'personality'); + } else { + Navigator.of(context).maybePop(); + } + }, + icon: Icon( + widget.currentPage == 'personality' + ? FeatherIcons.x + : FeatherIcons.arrowRight, + color: Colors.white, + ), + ) + : Container() ], ), - ), + const SizedBox(height: 12.0), + widget.currentPage == 'start' + ? const StartBody() + : widget.currentPage == 'grades' + ? const GradesBody() + : widget.currentPage == 'lessons' + ? const LessonsBody() + : widget.currentPage == 'allsum' + ? const AllSumBody() + : const PersonalityBody(), + ], ), ), ), @@ -198,9 +212,11 @@ class _SummaryScreenState extends State color: Colors.black, child: SummaryScreen( currentPage: page, + isBottomSheet: true, ), ), ), ); + //SummaryScreen.show(context: context, currentPage: page); } }