From 29dabd9011fc81f66a083d185f4317b52d09dcd0 Mon Sep 17 00:00:00 2001 From: Lars Refsgaard <1552887+LarsRefsgaard@users.noreply.github.com> Date: Thu, 3 Aug 2023 14:27:33 +0200 Subject: [PATCH] Fix about page ordering being reversed (#171) --- lib/ui/carp_study_style.dart | 2 +- lib/ui/pages/message_details_page.dart | 55 ++++++++-------- lib/ui/pages/study_details_page.dart | 35 +++++----- lib/ui/pages/study_page.dart | 73 +++++++++++++-------- lib/ui/widgets/details_banner.dart | 88 ++++++++------------------ lib/view_models/study_page_model.dart | 2 +- 6 files changed, 115 insertions(+), 140 deletions(-) diff --git a/lib/ui/carp_study_style.dart b/lib/ui/carp_study_style.dart index 70a55e3d..0c40a0c0 100644 --- a/lib/ui/carp_study_style.dart +++ b/lib/ui/carp_study_style.dart @@ -172,4 +172,4 @@ TextStyle timerStyle = const TextStyle(fontSize: 36, fontWeight: FontWeight.w600); TextStyle studyNameStyle = - const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w800); + const TextStyle(fontSize: 30.0, fontWeight: FontWeight.w800); diff --git a/lib/ui/pages/message_details_page.dart b/lib/ui/pages/message_details_page.dart index 9efc4153..64a094f4 100644 --- a/lib/ui/pages/message_details_page.dart +++ b/lib/ui/pages/message_details_page.dart @@ -24,10 +24,9 @@ class MessageDetailsPage extends StatelessWidget { }); return Scaffold( - body: Container( - color: Theme.of(context).colorScheme.secondary, - child: Padding( - padding: const EdgeInsets.only(top: 35), + body: SafeArea( + child: Container( + color: Theme.of(context).colorScheme.secondary, child: Column( children: [ Row(mainAxisAlignment: MainAxisAlignment.end, children: [ @@ -42,32 +41,30 @@ class MessageDetailsPage extends StatelessWidget { icon: const Icon(Icons.close_rounded)) ]), Flexible( - child: CustomScrollView( - slivers: [ - DetailsBanner(message.title!, message.image), - SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 30), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ + child: ListView( + children: [ + DetailsBanner(message.title ?? '', message.image), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + '${locale.translate(message.type.toString().split('.').last.toLowerCase())} - ${timeago.format(DateTime.now().copyWithAdditional(years: -DateTime.now().year + message.timestamp.year, months: -DateTime.now().month + message.timestamp.month, days: -DateTime.now().day + message.timestamp.day, hours: -DateTime.now().hour + message.timestamp.hour, minutes: -DateTime.now().minute + message.timestamp.minute), locale: Localizations.localeOf(context).languageCode)}', + style: aboutCardSubtitleStyle.copyWith( + color: Theme.of(context).primaryColor)), + message.subTitle != null + ? Text(locale.translate(message.subTitle!), + style: aboutCardContentStyle.copyWith( + color: Theme.of(context).primaryColor)) + : const SizedBox.shrink(), + if (message.message != null) Text( - '${locale.translate(message.type.toString().split('.').last.toLowerCase())} - ${timeago.format(DateTime.now().copyWithAdditional(years: -DateTime.now().year + message.timestamp.year, months: -DateTime.now().month + message.timestamp.month, days: -DateTime.now().day + message.timestamp.day, hours: -DateTime.now().hour + message.timestamp.hour, minutes: -DateTime.now().minute + message.timestamp.minute), locale: Localizations.localeOf(context).languageCode)}', - style: aboutCardSubtitleStyle.copyWith( - color: Theme.of(context).primaryColor)), - message.subTitle != null - ? Text(locale.translate(message.subTitle!), - style: aboutCardContentStyle.copyWith( - color: Theme.of(context).primaryColor)) - : const SizedBox.shrink(), - if (message.message != null) - Text( - locale.translate(message.message!), - style: aboutCardContentStyle, - textAlign: TextAlign.justify, - ) - ], - ), + locale.translate(message.message!), + style: aboutCardContentStyle, + textAlign: TextAlign.justify, + ) + ], ), ), ], diff --git a/lib/ui/pages/study_details_page.dart b/lib/ui/pages/study_details_page.dart index f3b9b346..ff1342a0 100644 --- a/lib/ui/pages/study_details_page.dart +++ b/lib/ui/pages/study_details_page.dart @@ -35,28 +35,23 @@ class StudyDetailsPage extends StatelessWidget { icon: const Icon(Icons.close)) ]), Flexible( - child: CustomScrollView( - slivers: [ - //CarpBanner(), + child: ListView( + children: [ DetailsBanner( studyPageModel.title, './assets/images/kids.png'), - SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.all(30), - child: Column( - children: [ - Text(locale.translate(studyPageModel.piAffiliation), - style: aboutCardSubtitleStyle.copyWith( - color: Theme.of(context).primaryColor)), - const SizedBox(height: 5), - Text( - studyDescription(), - style: aboutCardContentStyle, - textAlign: TextAlign.justify, - ), - const SizedBox(height: 50), - ], - ), + Padding( + padding: const EdgeInsets.all(16), + child: Column( + children: [ + Text(locale.translate(studyPageModel.piAffiliation), + style: aboutCardSubtitleStyle.copyWith( + color: Theme.of(context).primaryColor)), + Text( + studyDescription(), + style: aboutCardContentStyle, + textAlign: TextAlign.justify, + ), + ], ), ), ], diff --git a/lib/ui/pages/study_page.dart b/lib/ui/pages/study_page.dart index 7d27a878..b9b38855 100644 --- a/lib/ui/pages/study_page.dart +++ b/lib/ui/pages/study_page.dart @@ -11,14 +11,17 @@ class StudyPage extends StatefulWidget { class StudyPageState extends State { @override Widget build(BuildContext context) { + final Message studyDescription = Message( + id: '00000000-0000-0000-0000-000000000000', + title: widget.model.title, + message: widget.model.description, + type: MessageType.announcement, + timestamp: DateTime.now(), + image: 'assets/images/kids.png', + ); + return Scaffold( backgroundColor: Theme.of(context).colorScheme.secondary, - floatingActionButton: FloatingActionButton( - onPressed: () { - bloc.refreshMessages(); - }, - child: const Icon(Icons.refresh), - ), body: SafeArea( child: Column( crossAxisAlignment: CrossAxisAlignment.center, @@ -29,20 +32,27 @@ class StudyPageState extends State { child: StreamBuilder( stream: widget.model.messageStream, builder: (context, AsyncSnapshot snapshot) { - return CustomScrollView( - slivers: [ - DetailsBanner( - widget.model.title, './assets/images/kids.png', - isCarpBanner: true), - SliverList( - delegate: SliverChildBuilderDelegate( - (BuildContext context, int index) => - _aboutStudyCard( - context, widget.model.messages[index]), - childCount: widget.model.messages.length, - ), - ), - ], + return RefreshIndicator( + onRefresh: () async { + await bloc.refreshMessages(); + }, + child: ListView.builder( + itemCount: bloc.messages.length + 1, + itemBuilder: (context, index) { + if (index == 0) { + return _aboutStudyCard( + context, + studyDescription, + onTap: () { + context.push('/studyDetails'); + }, + ); + } + + return _aboutStudyCard( + context, widget.model.messages[index - 1]); + }, + ), ); }), ), @@ -52,7 +62,8 @@ class StudyPageState extends State { ); } - Widget _aboutStudyCard(BuildContext context, Message message) { + Widget _aboutStudyCard(BuildContext context, Message message, + {Function? onTap}) { RPLocalizations locale = RPLocalizations.of(context)!; // Initialization the language of the tiemago package @@ -69,7 +80,11 @@ class StudyPageState extends State { margin: const EdgeInsets.all(5), child: InkWell( onTap: () { - context.push('/message/${message.id}'); + if (onTap != null) { + onTap(); + } else { + context.push('/message/${message.id}'); + } }, child: Padding( padding: const EdgeInsets.all(8.0), @@ -110,22 +125,24 @@ class StudyPageState extends State { style: aboutCardSubtitleStyle.copyWith( color: Theme.of(context).primaryColor)), ), - Row(children: [ - if (message.subTitle!.isNotEmpty) + if (message.subTitle != null && message.subTitle!.isNotEmpty) + Row(children: [ Expanded( child: Text(locale.translate(message.subTitle!), style: aboutCardContentStyle.copyWith( color: Theme.of(context).primaryColor))), - ]), - Row(children: [ - if (message.message != null && message.message!.isNotEmpty) + ]), + if (message.message != null && + message.message != null && + message.message!.isNotEmpty) + Row(children: [ Expanded( child: Text( "${locale.translate(message.message!).substring(0, (message.message!.length > 150) ? 150 : null)}...", style: aboutCardContentStyle, textAlign: TextAlign.justify, )), - ]), + ]), ], ), ), diff --git a/lib/ui/widgets/details_banner.dart b/lib/ui/widgets/details_banner.dart index 2f24c638..f82cdaf6 100644 --- a/lib/ui/widgets/details_banner.dart +++ b/lib/ui/widgets/details_banner.dart @@ -1,77 +1,43 @@ part of carp_study_app; class DetailsBanner extends StatelessWidget { - const DetailsBanner(this.title, this.imagePath, - {super.key, this.isCarpBanner = false}); + const DetailsBanner(this.title, this.imagePath, {super.key}); final String title; final String? imagePath; - final bool isCarpBanner; @override Widget build( BuildContext context, ) { RPLocalizations locale = RPLocalizations.of(context)!; - return SliverAppBar( - expandedHeight: 150.0, - backgroundColor: Theme.of(context).colorScheme.secondary, - floating: false, - pinned: false, - flexibleSpace: FlexibleSpaceBar( - centerTitle: true, - titlePadding: const EdgeInsets.only(top: 15), - background: imagePath != null && imagePath!.isNotEmpty - ? ClipRRect( - child: ImageFiltered( - imageFilter: ui.ImageFilter.blur(sigmaX: 1, sigmaY: 1), - child: bloc.data.studyPageViewModel - .getMessageImage(imagePath)), - ) - : const SizedBox.shrink(), - title: InkWell( - onTap: () { - if (isCarpBanner) { - context.push('/studyDetails'); - } - }, - child: Padding( - padding: const EdgeInsets.all(10), - child: Stack( - alignment: AlignmentDirectional.bottomEnd, - children: [ - Stack( - children: [ - Text( - locale.translate(title), - style: studyNameStyle.copyWith( - // color: Theme.of(context).primaryColor, - foreground: Paint() - ..style = PaintingStyle.stroke - ..strokeWidth = 1 - ..color = Theme.of(context).colorScheme.secondary), - ), - Text( - locale.translate(title), - style: studyNameStyle.copyWith( - color: Theme.of(context).primaryColor), - ), - ], - ), - isCarpBanner - ? Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - Icon(Icons.touch_app, - color: Theme.of(context).primaryColor, size: 15), - ], - ) - : const SizedBox.shrink(), - ], - ), + return Column( + // crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + // only show this widget if there is an image = imagePath is not null and not empty + if (imagePath != null && imagePath!.isNotEmpty) + SizedBox( + height: 300, + child: bloc.data.studyPageViewModel.getMessageImage(imagePath), + ), + Padding( + padding: const EdgeInsets.all(16), + child: Stack( + alignment: AlignmentDirectional.bottomEnd, + children: [ + Stack( + children: [ + Text( + locale.translate(title), + style: studyNameStyle.copyWith( + fontSize: 30, color: Theme.of(context).primaryColor), + ), + ], + ), + ], ), ), - ), + ], ); } } diff --git a/lib/view_models/study_page_model.dart b/lib/view_models/study_page_model.dart index 3d51fb18..33b39d7c 100644 --- a/lib/view_models/study_page_model.dart +++ b/lib/view_models/study_page_model.dart @@ -37,7 +37,7 @@ class StudyPageViewModel extends ViewModel { Stream get messageStream => bloc.messageStream; /// The list of messages to be displayed. - List get messages => bloc.messages; + List get messages => bloc.messages.reversed.toList(); /// The icon for a type of message Icon getMessageTypeIcon(MessageType type) {