Skip to content

Commit

Permalink
upd
Browse files Browse the repository at this point in the history
  • Loading branch information
@witwash
witwash committed Feb 3, 2025
1 parent 92a05fe commit 357c161
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 47 deletions.
122 changes: 76 additions & 46 deletions optimus/lib/src/lists/list_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ class OptimusListTile extends StatelessWidget {
this.fontVariant = FontVariant.normal,
this.contentPadding,
this.prefixSize = OptimusPrefixSize.medium,
this.prefixVerticalAlignment,
});

/// Communicates the subject of the list item.
Expand All @@ -45,6 +46,7 @@ class OptimusListTile extends StatelessWidget {
final Widget? prefix;

final OptimusPrefixSize prefixSize;
final OptimusPrefixVerticalAlignment? prefixVerticalAlignment;

/// The Widget to be displayed on the tailoring position. Typically an [Icon].
final Widget? suffix;
Expand All @@ -68,6 +70,12 @@ class OptimusListTile extends StatelessWidget {
/// will be used.
final EdgeInsets? contentPadding;

OptimusPrefixVerticalAlignment get _prefixVerticalAlignment =>
prefixVerticalAlignment ??
(subtitle != null
? OptimusPrefixVerticalAlignment.start
: OptimusPrefixVerticalAlignment.center);

EdgeInsets _getContentPadding(OptimusTokens tokens) =>
contentPadding ??
EdgeInsets.symmetric(
Expand All @@ -85,57 +93,65 @@ class OptimusListTile extends StatelessWidget {
onTap: onTap,
content: Padding(
padding: _getContentPadding(tokens),
child: Row(
child: Stack(
children: [
if (prefix case final prefix?)
_Prefix(
prefix: prefix,
size: prefixSize,
), // TODO(witwash): add vertical padding to make it centered if there is no subtitle
Expanded(
child: Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.only(right: tokens.spacing100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: _Title(
title: title,
fontVariant: fontVariant,
),
),
if (info != null)
Flexible(child: _Info(info: info)),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: subtitle != null
? _Subtitle(
subtitle: subtitle,
fontVariant: fontVariant,
)
: const SizedBox.shrink(),
Positioned(
left: tokens.spacing100,
top: _prefixVerticalAlignment.getTop(tokens),
bottom: _prefixVerticalAlignment.getBottom(tokens),
child: SizedBox(
width: prefixSize.getWidth(tokens),
child: _Prefix(
prefix: prefix,
size: prefixSize,
),
),
),
Row(
children: [
if (prefix != null)
SizedBox(width: prefixSize.getWidth(tokens)),
Expanded(
child: Padding(
padding: EdgeInsets.only(right: tokens.spacing100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: _Title(
title: title,
fontVariant: fontVariant,
),
if (infoWidget case final infoWidget?) infoWidget,
],
),
],
),
),
if (info != null)
Flexible(child: _Info(info: info)),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: subtitle != null
? _Subtitle(
subtitle: subtitle,
fontVariant: fontVariant,
)
: const SizedBox.shrink(),
),
if (infoWidget case final infoWidget?) infoWidget,
],
),
],
),
),
if (suffix case final suffix?) _Suffix(suffix: suffix),
],
),
),
if (suffix case final suffix?) _Suffix(suffix: suffix),
],
),
],
),
Expand All @@ -144,6 +160,8 @@ class OptimusListTile extends StatelessWidget {
}
}

enum OptimusPrefixVerticalAlignment { center, start }

class _Prefix extends StatelessWidget {
const _Prefix({
required this.prefix,
Expand Down Expand Up @@ -239,3 +257,15 @@ extension on OptimusPrefixSize {
OptimusPrefixSize.large => tokens.sizing600,
};
}

extension on OptimusPrefixVerticalAlignment {
double getTop(OptimusTokens tokens) => switch (this) {
OptimusPrefixVerticalAlignment.center => tokens.spacing0,
OptimusPrefixVerticalAlignment.start => tokens.spacing100,
};

double? getBottom(OptimusTokens tokens) => switch (this) {
OptimusPrefixVerticalAlignment.center => tokens.spacing0,
OptimusPrefixVerticalAlignment.start => null,
};
}
9 changes: 8 additions & 1 deletion optimus_widgetbook/lib/components/list/list_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,18 @@ Widget createDefaultStyle(BuildContext context) {
label: 'Font variant',
initialOption: FontVariant.normal,
options: FontVariant.values,
labelBuilder: (value) => value.name,
labelBuilder: enumLabelBuilder,
);
final prefixSize = k.list(
label: 'Prefix Size',
options: OptimusPrefixSize.values,
initialOption: OptimusPrefixSize.medium,
labelBuilder: enumLabelBuilder,
);
final prefixAlignment = k.listOrNull(
label: 'Prefix Alignment',
options: OptimusPrefixVerticalAlignment.values,
labelBuilder: enumOrNullLabelBuilder,
);

return SingleChildScrollView(
Expand All @@ -48,6 +54,7 @@ Widget createDefaultStyle(BuildContext context) {
infoWidget: infoWidget != null ? Icon(infoWidget.data) : null,
onTap: ignore,
prefixSize: prefixSize,
prefixVerticalAlignment: prefixAlignment,
),
)
.toList(),
Expand Down
4 changes: 4 additions & 0 deletions optimus_widgetbook/lib/utils.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ quisque ultrices condimentum mauris a diam.''';

final stubDate = DateTime(2012, 4, 3);

String enumOrNullLabelBuilder<T extends Enum>(T? value) => value?.name ?? '';

String enumLabelBuilder<T extends Enum>(T value) => value.name;

extension KnobsBuilderExt on KnobsBuilder {
OptimusWidgetSize get widgetSizeKnob => list(
label: 'Size',
Expand Down

0 comments on commit 357c161

Please sign in to comment.