diff --git a/app/lib/common/widgets/drug_list/drug_items/drug_cards.dart b/app/lib/common/widgets/drug_list/drug_items/drug_cards.dart index a53cad8d..6f714dbf 100644 --- a/app/lib/common/widgets/drug_list/drug_items/drug_cards.dart +++ b/app/lib/common/widgets/drug_list/drug_items/drug_cards.dart @@ -43,11 +43,9 @@ class DrugCard extends StatelessWidget { @override Widget build(BuildContext context) { final drugName = formatDrugName(drug, showDrugInteractionIndicator); - return Padding( - padding: EdgeInsets.symmetric(vertical: PharMeTheme.smallSpace / 2), - child: RoundedCard( + return RoundedCard( onTap: onTap, - padding: EdgeInsets.all(8), + innerPadding: EdgeInsets.all(PharMeTheme.smallSpace), radius: 16, color: drug.warningLevel.color, child: Row( @@ -66,15 +64,15 @@ class DrugCard extends StatelessWidget { .copyWith(fontWeight: FontWeight.bold), ), ]), - SizedBox(height: 4), + SizedBox(height: PharMeTheme.smallSpace / 2), if (drug.annotations.brandNames.isNotEmpty) ...[ - SizedBox(width: 4), + SizedBox(width: PharMeTheme.smallSpace / 2), Text( '(${drug.annotations.brandNames.join(', ')})', style: PharMeTheme.textTheme.titleMedium, ), ], - SizedBox(height: 8), + SizedBox(height: PharMeTheme.smallSpace * 0.75), Text( drug.annotations.drugclass, style: PharMeTheme.textTheme.titleSmall, @@ -85,7 +83,6 @@ class DrugCard extends StatelessWidget { Icon(Icons.chevron_right_rounded), ], ), - ), ); } } diff --git a/app/lib/common/widgets/drug_search.dart b/app/lib/common/widgets/drug_search.dart index 35c00646..8fa1c335 100644 --- a/app/lib/common/widgets/drug_search.dart +++ b/app/lib/common/widgets/drug_search.dart @@ -65,6 +65,13 @@ class DrugSearch extends HookWidget { ] ), SizedBox(height: PharMeTheme.smallSpace), + if (showDrugInteractionIndicator) + PageIndicatorExplanation( + context.l10n.search_page_indicator_explanation( + drugInteractionIndicatorName, + drugInteractionIndicator + ), + ), scrollList( keepPosition: keepPosition, buildDrugList( @@ -79,7 +86,6 @@ class DrugSearch extends HookWidget { useDrugClass: useDrugClass, ) ), - ..._maybeShowDrugInteractionExplanation(context), ], ); } @@ -88,19 +94,6 @@ class DrugSearch extends HookWidget { ); } - List _maybeShowDrugInteractionExplanation(BuildContext context) { - if (!showDrugInteractionIndicator) return []; - return [ - SizedBox(height: PharMeTheme.smallSpace), - Text( - context.l10n.search_page_indicator_explanation( - drugInteractionIndicatorName, - drugInteractionIndicator - ) - ), - ]; - } - Widget buildFilter(BuildContext context) { final cubit = context.read(); final filter = cubit.filter; diff --git a/app/lib/common/widgets/module.dart b/app/lib/common/widgets/module.dart index 5136165a..ad0863e7 100644 --- a/app/lib/common/widgets/module.dart +++ b/app/lib/common/widgets/module.dart @@ -7,6 +7,7 @@ export 'drug_list/builder.dart'; export 'drug_list/cubit.dart'; export 'headings.dart'; export 'indicators.dart'; +export 'page_indicator_explanation.dart'; export 'page_scaffold.dart'; export 'radiant_gradient_mask.dart'; export 'rounded_card.dart'; diff --git a/app/lib/common/widgets/page_indicator_explanation.dart b/app/lib/common/widgets/page_indicator_explanation.dart new file mode 100644 index 00000000..52278887 --- /dev/null +++ b/app/lib/common/widgets/page_indicator_explanation.dart @@ -0,0 +1,19 @@ +import '../module.dart'; + +class PageIndicatorExplanation extends StatelessWidget { + const PageIndicatorExplanation(this.text); + + final String text; + + @override + Widget build(BuildContext context) { + return Padding( + padding: EdgeInsets.only( + left: PharMeTheme.smallSpace, + right: PharMeTheme.smallSpace, + bottom: PharMeTheme.smallSpace, + ), + child: Text(text), + ); + } +} \ No newline at end of file diff --git a/app/lib/common/widgets/page_scaffold.dart b/app/lib/common/widgets/page_scaffold.dart index cbdf8786..ddf4ebfd 100644 --- a/app/lib/common/widgets/page_scaffold.dart +++ b/app/lib/common/widgets/page_scaffold.dart @@ -77,7 +77,11 @@ Scaffold unscrollablePageScaffold({ appBar: appBar, body: SafeArea( child: Padding( - padding: EdgeInsets.all(padding ?? PharMeTheme.smallSpace), + padding: EdgeInsets.only( + top: padding ?? PharMeTheme.smallSpace, + left: padding ?? PharMeTheme.smallSpace, + right: padding ?? PharMeTheme.smallSpace, + ), child: body, ), ), diff --git a/app/lib/common/widgets/rounded_card.dart b/app/lib/common/widgets/rounded_card.dart index 7436bf30..ec27186d 100644 --- a/app/lib/common/widgets/rounded_card.dart +++ b/app/lib/common/widgets/rounded_card.dart @@ -2,14 +2,16 @@ import '../module.dart'; class RoundedCard extends StatelessWidget { const RoundedCard({ - this.padding = const EdgeInsets.all(16), + this.innerPadding, + this.outerPadding, this.color = PharMeTheme.surfaceColor, this.radius = 20, this.onTap, required this.child, }); - final EdgeInsets padding; + final EdgeInsets? innerPadding; + final EdgeInsets? outerPadding; final VoidCallback? onTap; final Color color; final double radius; @@ -17,27 +19,34 @@ class RoundedCard extends StatelessWidget { @override Widget build(BuildContext context) { - Widget child = Padding(padding: padding, child: this.child); + Widget child = Padding( + padding: innerPadding ?? EdgeInsets.all(PharMeTheme.mediumSpace), + child: this.child, + ); if (onTap != null) child = InkWell(onTap: onTap, child: child); // ignore: sized_box_for_whitespace return Container( width: double.infinity, - child: DecoratedBox( - decoration: BoxDecoration( - color: color, - border: Border.all(width: 0.5, color: PharMeTheme.borderColor), - borderRadius: BorderRadius.all(Radius.circular(radius)), - boxShadow: [ - BoxShadow( - color: PharMeTheme.onSurfaceColor, - blurRadius: 16, - offset: Offset(0, 4), - ), - ], + child: Padding( + padding: outerPadding ?? EdgeInsets.symmetric( + horizontal: PharMeTheme.smallSpace, + vertical: PharMeTheme.smallSpace / 2 + ), + child: DecoratedBox( + decoration: BoxDecoration( + color: color, + borderRadius: BorderRadius.all(Radius.circular(radius)), + boxShadow: [ + BoxShadow( + color: PharMeTheme.onSurfaceColor, + blurRadius: 16, + ), + ], + ), + child: child, ), - child: child, ), ); } diff --git a/app/lib/common/widgets/scroll_list.dart b/app/lib/common/widgets/scroll_list.dart index 28796bce..d96425a0 100644 --- a/app/lib/common/widgets/scroll_list.dart +++ b/app/lib/common/widgets/scroll_list.dart @@ -2,7 +2,10 @@ import 'package:flutter_list_view/flutter_list_view.dart'; import '../module.dart'; -Widget scrollList(List body, {bool keepPosition = false}) { +Widget scrollList(List body, { + bool keepPosition = false, + double? verticalPadding, +}) { String getItemKey(Widget widget) => widget.key.toString(); if (body.map(getItemKey).toSet().length != body.length) { throw Exception('Items passed to scrollList need unique keys'); @@ -12,10 +15,24 @@ Widget scrollList(List body, {bool keepPosition = false}) { thumbVisibility: true, thickness: PharMeTheme.smallSpace / 2, child: Padding( - padding: EdgeInsets.only(right: PharMeTheme.smallSpace * 1.5), + padding: EdgeInsets.only(right: PharMeTheme.mediumSpace), child: FlutterListView( delegate: FlutterListViewDelegate( - (context, index) => body[index], + (context, index) => (index == 0) + ? Padding( + padding: EdgeInsets.only( + top: verticalPadding ?? PharMeTheme.smallSpace, + ), + child: body[index] + ) + : (index == body.length - 1) + ? Padding( + padding: EdgeInsets.only( + bottom: verticalPadding ?? PharMeTheme.smallSpace, + ), + child: body[index] + ) + : body[index], childCount: body.length, onItemKey: (index) => getItemKey(body[index]), keepPosition: keepPosition, diff --git a/app/lib/drug/widgets/annotation_cards/guideline.dart b/app/lib/drug/widgets/annotation_cards/guideline.dart index 8891cde5..a77d4e86 100644 --- a/app/lib/drug/widgets/annotation_cards/guideline.dart +++ b/app/lib/drug/widgets/annotation_cards/guideline.dart @@ -11,7 +11,12 @@ class GuidelineAnnotationCard extends StatelessWidget { @override Widget build(BuildContext context) { return RoundedCard( - padding: const EdgeInsets.fromLTRB(16, 16, 16, 0), + innerPadding: const EdgeInsets.fromLTRB( + PharMeTheme.mediumSpace, + PharMeTheme.mediumSpace, + PharMeTheme.mediumSpace, + 0 + ), child: SingleChildScrollView( child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildHeader(context), diff --git a/app/lib/drug_selection/pages/drug_selection.dart b/app/lib/drug_selection/pages/drug_selection.dart index f2ee0a14..54333532 100644 --- a/app/lib/drug_selection/pages/drug_selection.dart +++ b/app/lib/drug_selection/pages/drug_selection.dart @@ -31,7 +31,7 @@ class DrugSelectionPage extends HookWidget { barBottom: concludesOnboarding ? context.l10n.drug_selection_onboarding_description : null, - padding: PharMeTheme.largeSpace, + padding: PharMeTheme.mediumSpace, body: Column( children: [ Expanded(child: _buildDrugList(context, state)), @@ -54,7 +54,11 @@ class DrugSelectionPage extends HookWidget { Widget _buildButton(BuildContext context, DrugSelectionState state) { return Padding( - padding: EdgeInsets.only(top: PharMeTheme.mediumSpace), + padding: EdgeInsets.only( + left: PharMeTheme.mediumSpace, + top: PharMeTheme.mediumSpace, + right: PharMeTheme.mediumSpace, + ), child: FullWidthButton( context.l10n.action_continue, () async { diff --git a/app/lib/report/pages/report.dart b/app/lib/report/pages/report.dart index 7f02aaf8..f67b6185 100644 --- a/app/lib/report/pages/report.dart +++ b/app/lib/report/pages/report.dart @@ -33,38 +33,27 @@ class ReportPage extends StatelessWidget { barBottom: context.l10n.report_content_explanation, body: Column( children: [ + if (hasActiveInhibitors) PageIndicatorExplanation( + context.l10n.report_page_indicator_explanation( + drugInteractionIndicatorName, + drugInteractionIndicator + ), + ), scrollList( - userPhenotypes.map((phenotype) => - Column( - key: Key('gene-card-${phenotype.geneSymbol}'), - children: [ - GeneCard(phenotype), - SizedBox(height: 8) - ] - ) - ).toList()), - if (hasActiveInhibitors) drugInteractionExplanation(context), + userPhenotypes.map((phenotype) => GeneCard( + phenotype, + key: Key('gene-card-${phenotype.geneSymbol}') + )).toList(), + ), ] ) ), ); } - - Widget drugInteractionExplanation(BuildContext context) { - return Column(children: [ - SizedBox(height: PharMeTheme.smallSpace), - Text( - context.l10n.report_page_indicator_explanation( - drugInteractionIndicatorName, - drugInteractionIndicator - ) - ), - ]); - } } class GeneCard extends StatelessWidget { - const GeneCard(this.phenotype); + const GeneCard(this.phenotype, { super.key }); final CpicPhenotype phenotype; @@ -108,7 +97,7 @@ class GeneCard extends StatelessWidget { ).toList(); return RoundedCard( onTap: () => context.router.push(GeneRoute(phenotype: phenotype)), - padding: EdgeInsets.all(8), + innerPadding: EdgeInsets.all(PharMeTheme.smallSpace), radius: 16, child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded(