From f28788577139fa1febf77a7919a58f4cd1cb1eac Mon Sep 17 00:00:00 2001 From: Lars Refsgaard <1552887+LarsRefsgaard@users.noreply.github.com> Date: Mon, 24 Jul 2023 12:14:10 +0200 Subject: [PATCH] Update UI styling and transition routines Modified various styles in carp_study_style.dart, making study name text more prominent. Updated Scaffold provision in message_details_page.dart for safety areas. Changed the ScrollView to ListView in multiple pages. Updated the messages' display method to use ListView.builder in study_page.dart. Simplified the structure of the DetailsBanner widget in details_banner.dart, removing some unused properties. --- 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 | 35 +++++----- lib/ui/widgets/details_banner.dart | 88 ++++++++------------------ 5 files changed, 86 insertions(+), 129 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 f9e85f13..63c1a89d 100644 --- a/lib/ui/pages/study_page.dart +++ b/lib/ui/pages/study_page.dart @@ -30,29 +30,28 @@ class StudyPageState extends State { const CarpAppBar(), Flexible( child: StreamBuilder( - stream: widget.model.messageStream, + stream: widget.model.messageStream, builder: (context, AsyncSnapshot snapshot) { return RefreshIndicator( onRefresh: () async { await bloc.refreshMessages(); }, - child: CustomScrollView( - slivers: [ - SliverToBoxAdapter( - child: _aboutStudyCard(context, studyDescription, - onTap: () { - context.push('/studyDetails'); - }), - ), - SliverList( - delegate: SliverChildBuilderDelegate( - (BuildContext context, int index) => - _aboutStudyCard( - context, widget.model.messages[index]), - childCount: widget.model.messages.length, - ), - ), - ], + 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, bloc.messages[index - 1]); + }, ), ); }), 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), + ), + ], + ), + ], ), ), - ), + ], ); } }