Skip to content

Commit

Permalink
Update UI styling and transition routines
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@LarsRefsgaard
LarsRefsgaard committed Jul 24, 2023
1 parent 2c181af commit f287885
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 129 deletions.
2 changes: 1 addition & 1 deletion lib/ui/carp_study_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
55 changes: 26 additions & 29 deletions lib/ui/pages/message_details_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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,
)
],
),
),
],
Expand Down
35 changes: 15 additions & 20 deletions lib/ui/pages/study_details_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
],
),
),
],
Expand Down
35 changes: 17 additions & 18 deletions lib/ui/pages/study_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,28 @@ class StudyPageState extends State<StudyPage> {
const CarpAppBar(),
Flexible(
child: StreamBuilder<int>(
stream: widget.model.messageStream,
stream: widget.model.messageStream,
builder: (context, AsyncSnapshot<int> 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]);
},
),
);
}),
Expand Down
88 changes: 27 additions & 61 deletions lib/ui/widgets/details_banner.dart
View file
Original file line number Diff line number Diff line change
@@ -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),
),
],
),
],
),
),
),
],
);
}
}

0 comments on commit f287885

Please sign in to comment.