fixed navigation and ui bugs in summary

This commit is contained in:
kima 2023-06-25 14:36:18 +02:00
parent 50bc03f403
commit 51e2c63134
6 changed files with 315 additions and 297 deletions

View File

@ -13,7 +13,6 @@ import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:i18n_extension/i18n_widget.dart'; import 'package:i18n_extension/i18n_widget.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:wtf_sliding_sheet/wtf_sliding_sheet.dart';
import 'live_card.i18n.dart'; import 'live_card.i18n.dart';
class LiveCard extends StatefulWidget { class LiveCard extends StatefulWidget {
@ -68,30 +67,31 @@ class _LiveCardState extends State<LiveCard> {
), ),
), ),
onTap: () { onTap: () {
showSlidingBottomSheet( // showSlidingBottomSheet(
context, // context,
useRootNavigator: true, // useRootNavigator: true,
builder: (context) => SlidingSheetDialog( // builder: (context) => SlidingSheetDialog(
color: Colors.black.withOpacity(0.99), // color: Colors.black.withOpacity(0.99),
duration: const Duration(milliseconds: 400), // duration: const Duration(milliseconds: 400),
scrollSpec: const ScrollSpec.bouncingScroll(), // scrollSpec: const ScrollSpec.bouncingScroll(),
snapSpec: const SnapSpec( // snapSpec: const SnapSpec(
snap: true, // snap: true,
snappings: [1.0], // snappings: [1.0],
initialSnap: 1.0, // initialSnap: 1.0,
positioning: SnapPositioning.relativeToAvailableSpace, // positioning: SnapPositioning.relativeToAvailableSpace,
), // ),
minHeight: MediaQuery.of(context).size.height, // minHeight: MediaQuery.of(context).size.height,
cornerRadius: 16, // cornerRadius: 16,
cornerRadiusOnFullscreen: 0, // cornerRadiusOnFullscreen: 0,
builder: (context, state) => const Material( // builder: (context, state) => const Material(
color: Colors.black, // color: Colors.black,
child: SummaryScreen( // child: SummaryScreen(
currentPage: 'start', // currentPage: 'start',
), // ),
), // ),
), // ),
); // );
SummaryScreen.show(context: context, currentPage: 'start');
}, },
); );
break; break;

View File

@ -198,163 +198,164 @@ class _GradesBodyState extends State<GradesBody> {
getGrades(); getGrades();
return Column( return Expanded(
crossAxisAlignment: CrossAxisAlignment.start, child: ListView(
children: [ children: [
SizedBox( SizedBox(
height: ((100 * subjectTiles5.length) / height: ((100 * subjectTiles5.length) /
(subjectTiles5[0].runtimeType == AnimatedContainer (subjectTiles5[0].runtimeType == AnimatedContainer
? 1.95 ? 1.95
: 1.2)) : 1.2))
.toDouble(), .toDouble(),
child: ListView.builder( child: ListView.builder(
padding: const EdgeInsets.only(left: 5), padding: const EdgeInsets.only(left: 5),
physics: const BouncingScrollPhysics(), physics: const BouncingScrollPhysics(),
itemCount: max(subjectTiles5.length, 1), itemCount: max(subjectTiles5.length, 1),
itemBuilder: (context, index) { itemBuilder: (context, index) {
if (subjectTiles5.isNotEmpty) { if (subjectTiles5.isNotEmpty) {
EdgeInsetsGeometry panelPadding = EdgeInsetsGeometry panelPadding =
const EdgeInsets.symmetric(horizontal: 24.0); const EdgeInsets.symmetric(horizontal: 24.0);
if (subjectTiles5[index].runtimeType == AnimatedContainer) { if (subjectTiles5[index].runtimeType == AnimatedContainer) {
return Padding( return Padding(
padding: const EdgeInsets.only(top: 8), padding: const EdgeInsets.only(top: 8),
child: subjectTiles5[index]); child: subjectTiles5[index]);
} else {
return Padding(
padding: panelPadding, child: subjectTiles5[index]);
}
} else { } else {
return Padding( return Container();
padding: panelPadding, child: subjectTiles5[index]);
} }
} else { },
return Container(); ),
}
},
), ),
), const SizedBox(height: 12.0),
const SizedBox(height: 12.0), Text(
Text( 'tryagain'.i18n,
'tryagain'.i18n, style: const TextStyle(
style: const TextStyle( fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, fontSize: 22.0,
fontSize: 22.0, color: Colors.white,
color: Colors.white, ),
), ),
), const SizedBox(height: 12.0),
const SizedBox(height: 12.0), SizedBox(
SizedBox( height: ((100 * subjectTiles3.length) /
height: ((100 * subjectTiles3.length) / (subjectTiles3[0].runtimeType == AnimatedContainer
(subjectTiles3[0].runtimeType == AnimatedContainer ? 1.95
? 1.95 : 1.2))
: 1.2)) .toDouble(),
.toDouble(), child: ListView.builder(
child: ListView.builder( padding: const EdgeInsets.only(left: 5),
padding: const EdgeInsets.only(left: 5), physics: const BouncingScrollPhysics(),
physics: const BouncingScrollPhysics(), itemCount: max(subjectTiles3.length, 1),
itemCount: max(subjectTiles3.length, 1), itemBuilder: (context, index) {
itemBuilder: (context, index) { if (subjectTiles3.isNotEmpty) {
if (subjectTiles3.isNotEmpty) { EdgeInsetsGeometry panelPadding =
EdgeInsetsGeometry panelPadding = const EdgeInsets.symmetric(horizontal: 24.0);
const EdgeInsets.symmetric(horizontal: 24.0);
if (subjectTiles3[index].runtimeType == AnimatedContainer) { if (subjectTiles3[index].runtimeType == AnimatedContainer) {
return Padding( return Padding(
padding: const EdgeInsets.only(top: 8), padding: const EdgeInsets.only(top: 8),
child: subjectTiles3[index]); child: subjectTiles3[index]);
} else {
return Padding(
padding: panelPadding, child: subjectTiles3[index]);
}
} else { } else {
return Padding( return Container();
padding: panelPadding, child: subjectTiles3[index]);
} }
} else { },
return Container(); ),
}
},
), ),
), const SizedBox(height: 12.0),
const SizedBox(height: 12.0), Text(
Text( 'oops'.i18n,
'oops'.i18n, style: const TextStyle(
style: const TextStyle( fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, fontSize: 22.0,
fontSize: 22.0, color: Colors.white,
color: Colors.white, ),
), ),
), const SizedBox(height: 12.0),
const SizedBox(height: 12.0), SizedBox(
SizedBox( height: ((100 * subjectTiles1.length) /
height: ((100 * subjectTiles1.length) / (subjectTiles1[0].runtimeType == AnimatedContainer
(subjectTiles1[0].runtimeType == AnimatedContainer ? 1.95
? 1.95 : 1.2))
: 1.2)) .toDouble(),
.toDouble(), child: ListView.builder(
child: ListView.builder( padding: const EdgeInsets.only(left: 5),
padding: const EdgeInsets.only(left: 5), physics: const BouncingScrollPhysics(),
physics: const BouncingScrollPhysics(), itemCount: max(subjectTiles1.length, 1),
itemCount: max(subjectTiles1.length, 1), itemBuilder: (context, index) {
itemBuilder: (context, index) { if (subjectTiles1.isNotEmpty) {
if (subjectTiles1.isNotEmpty) { EdgeInsetsGeometry panelPadding =
EdgeInsetsGeometry panelPadding = const EdgeInsets.symmetric(horizontal: 24.0);
const EdgeInsets.symmetric(horizontal: 24.0);
if (subjectTiles1[index].runtimeType == AnimatedContainer) { if (subjectTiles1[index].runtimeType == AnimatedContainer) {
return Padding( return Padding(
padding: const EdgeInsets.only(top: 8), padding: const EdgeInsets.only(top: 8),
child: subjectTiles1[index]); child: subjectTiles1[index]);
} else {
return Padding(
padding: panelPadding, child: subjectTiles1[index]);
}
} else { } else {
return Padding( return Container();
padding: panelPadding, child: subjectTiles1[index]);
} }
} else { },
return Container(); ),
}
},
), ),
), const SizedBox(height: 30.0),
const SizedBox(height: 40.0), Center(
Center( child: Column(
child: Column( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, children: [
children: [ Text(
Text( 'endyear_avg'.i18n,
'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,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: const TextStyle(
color: gradeColor(context: context, value: endYearAvg), fontWeight: FontWeight.bold,
fontWeight: FontWeight.w800, fontSize: 22.0,
fontSize: 32.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,
),
),
),
],
),
), ),
), ],
], ),
); );
} }
} }

View File

@ -230,34 +230,34 @@ class _LessonsBodyState extends State<LessonsBody> {
getAndSortDelays(); getAndSortDelays();
generateTiles(); generateTiles();
return Column( return Expanded(
crossAxisAlignment: CrossAxisAlignment.start, child: ListView(
mainAxisAlignment: MainAxisAlignment.center, children: [
children: [ lessons[0],
lessons[0], const SizedBox(height: 18.0),
const SizedBox(height: 18.0), Text(
Text( 'dontfelt'.i18n,
'dontfelt'.i18n, style: const TextStyle(
style: const TextStyle( fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, fontSize: 22.0,
fontSize: 22.0, color: Colors.white,
color: Colors.white, ),
), ),
), const SizedBox(height: 18.0),
const SizedBox(height: 18.0), lessons[1],
lessons[1], const SizedBox(height: 18.0),
const SizedBox(height: 18.0), Text(
Text( 'youlate'.i18n,
'youlate'.i18n, style: const TextStyle(
style: const TextStyle( fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, fontSize: 22.0,
fontSize: 22.0, color: Colors.white,
color: Colors.white, ),
), ),
), const SizedBox(height: 18.0),
const SizedBox(height: 18.0), lessons[2],
lessons[2], ],
], ),
); );
} }
} }

View File

@ -58,11 +58,10 @@ class _PersonalityBodyState extends State<PersonalityBody> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
user = Provider.of<UserProvider>(context); user = Provider.of<UserProvider>(context);
return Column( return Expanded(
crossAxisAlignment: CrossAxisAlignment.center, child: ListView(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [ children: [
const SizedBox(height: 60), const SizedBox(height: 30),
AnimatedCrossFade( AnimatedCrossFade(
duration: const Duration(milliseconds: 1000), duration: const Duration(milliseconds: 1000),
sizeCurve: Curves.easeInToLinear, sizeCurve: Curves.easeInToLinear,
@ -80,7 +79,7 @@ class _PersonalityBodyState extends State<PersonalityBody> {
? CrossFadeState.showFirst ? CrossFadeState.showFirst
: CrossFadeState.showSecond, : CrossFadeState.showSecond,
), ),
const SizedBox(height: 40), const SizedBox(height: 30),
if (isRevealed) if (isRevealed)
Center( Center(
child: Row( child: Row(
@ -122,6 +121,8 @@ class _PersonalityBodyState extends State<PersonalityBody> {
), ),
), ),
const SizedBox(height: 60), const SizedBox(height: 60),
]); ],
),
);
} }
} }

View File

@ -3,7 +3,6 @@ import 'package:filcnaplo/models/settings.dart';
import 'package:filcnaplo_kreta_api/providers/grade_provider.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.dart';
import 'package:filcnaplo_mobile_ui/screens/summary/summary_screen.i18n.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/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart'; import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@ -61,6 +60,7 @@ class _StartBodyState extends State<StartBody> {
color: Colors.black, color: Colors.black,
child: SummaryScreen( child: SummaryScreen(
currentPage: 'grades', currentPage: 'grades',
isBottomSheet: true,
), ),
), ),
), ),

View File

@ -1,6 +1,7 @@
import 'package:confetti/confetti.dart'; import 'package:confetti/confetti.dart';
import 'package:filcnaplo/api/providers/user_provider.dart'; import 'package:filcnaplo/api/providers/user_provider.dart';
import 'package:filcnaplo/models/settings.dart'; import 'package:filcnaplo/models/settings.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart'; import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@ -15,12 +16,22 @@ import 'pages/personality_page.dart';
class SummaryScreen extends StatefulWidget { class SummaryScreen extends StatefulWidget {
final String currentPage; final String currentPage;
final bool isBottomSheet;
const SummaryScreen({Key? key, this.currentPage = 'personality'}) const SummaryScreen({
: super(key: key); Key? key,
this.currentPage = 'personality',
this.isBottomSheet = false,
}) : super(key: key);
@override @override
_SummaryScreenState createState() => _SummaryScreenState(); _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<SummaryScreen> class _SummaryScreenState extends State<SummaryScreen>
@ -28,7 +39,6 @@ class _SummaryScreenState extends State<SummaryScreen>
late UserProvider user; late UserProvider user;
late SettingsProvider settings; late SettingsProvider settings;
late AnimationController _hideContainersController;
ConfettiController? _confettiController; ConfettiController? _confettiController;
late String firstName; late String firstName;
@ -46,9 +56,6 @@ class _SummaryScreenState extends State<SummaryScreen>
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_hideContainersController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 200));
} }
@override @override
@ -70,106 +77,113 @@ class _SummaryScreenState extends State<SummaryScreen>
firstName = "János"; firstName = "János";
} }
return AnimatedBuilder( return widget.isBottomSheet
animation: _hideContainersController, ? buildContainer()
builder: (context, child) => Opacity( : Scaffold(
opacity: 1 - _hideContainersController.value, body: buildContainer(),
child: Container( );
decoration: BoxDecoration(gradient: _backgroundGradient), }
child: Container(
decoration: BoxDecoration(gradient: _backgroundGradient), Widget buildContainer() {
width: MediaQuery.of(context).size.width, return Container(
height: MediaQuery.of(context).size.height, decoration: BoxDecoration(gradient: _backgroundGradient),
child: SafeArea( child: Container(
child: Padding( decoration: BoxDecoration(gradient: _backgroundGradient),
padding: EdgeInsets.only( width: MediaQuery.of(context).size.width,
left: 24.0, height: MediaQuery.of(context).size.height,
right: 24.0, child: SafeArea(
top: MediaQuery.of(context).padding.top, child: Padding(
bottom: 52.0, padding: const EdgeInsets.only(
), left: 24.0,
child: Column( right: 24.0,
crossAxisAlignment: widget.currentPage == 'start' top: 15.0,
? CrossAxisAlignment.center bottom: 40.0,
: CrossAxisAlignment.start, ),
mainAxisAlignment: widget.currentPage == 'start' child: Column(
? MainAxisAlignment.spaceBetween crossAxisAlignment: widget.currentPage == 'start'
: MainAxisAlignment.start, ? CrossAxisAlignment.center
: CrossAxisAlignment.start,
mainAxisAlignment: widget.currentPage == 'start'
? MainAxisAlignment.spaceBetween
: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Row( Expanded(
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Column( Text(
crossAxisAlignment: CrossAxisAlignment.start, 'greeting'.i18n.fill([firstName]),
children: [ textAlign: TextAlign.left,
Text( maxLines: 2,
'greeting'.i18n.fill([firstName]), overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left, softWrap: true,
maxLines: 2, style: const TextStyle(
overflow: TextOverflow.fade, fontWeight: FontWeight.w900,
style: const TextStyle( fontSize: 26.0,
fontWeight: FontWeight.w900, color: Colors.white,
fontSize: 26.0,
color: Colors.white,
),
), ),
Text( ),
widget.currentPage == 'start' Text(
? 'title_start'.i18n widget.currentPage == 'start'
: widget.currentPage == 'grades' ? 'title_start'.i18n
? 'title_grades'.i18n : widget.currentPage == 'grades'
: widget.currentPage == 'lessons' ? 'title_grades'.i18n
? 'title_lessons'.i18n : widget.currentPage == 'lessons'
: widget.currentPage == 'personality' ? 'title_lessons'.i18n
? 'title_personality'.i18n : widget.currentPage == 'personality'
: '', ? 'title_personality'.i18n
overflow: TextOverflow.fade, : '',
style: const TextStyle( maxLines: 1,
fontWeight: FontWeight.bold, overflow: TextOverflow.fade,
fontSize: 22.0, softWrap: false,
color: Colors.white, 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'
widget.currentPage == 'start' ? IconButton(
? const StartBody() onPressed: () async {
: widget.currentPage == 'grades' Navigator.of(context).pop();
? const GradesBody() if (widget.currentPage == 'grades') {
: widget.currentPage == 'lessons' openNewPage(page: 'lessons');
? const LessonsBody() } else if (widget.currentPage == 'lessons') {
: widget.currentPage == 'allsum' openNewPage(page: 'allsum');
? const AllSumBody() } else if (widget.currentPage == 'allsum') {
: const PersonalityBody(), 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<SummaryScreen>
color: Colors.black, color: Colors.black,
child: SummaryScreen( child: SummaryScreen(
currentPage: page, currentPage: page,
isBottomSheet: true,
), ),
), ),
), ),
); );
//SummaryScreen.show(context: context, currentPage: page);
} }
} }