fixed section header widget span layout

This commit is contained in:
Thibault Deckers 2024-10-07 23:36:21 +02:00
parent 77cea1b7cb
commit eb68b8eba6

View file

@ -25,7 +25,10 @@ class SectionHeader<T> extends StatelessWidget {
this.selectable = true, this.selectable = true,
}); });
static const leadingSize = Size(48, 32); static const leadingSize = Size.square(32);
static const widgetSpanAlignmentMargin = EdgeInsetsDirectional.only(bottom: 4);
static final leadingMargin = const EdgeInsetsDirectional.only(end: 8) + widgetSpanAlignmentMargin;
static final trailingMargin = const EdgeInsetsDirectional.only(start: 8) + widgetSpanAlignmentMargin;
static const margin = EdgeInsets.symmetric(vertical: 0, horizontal: 8); static const margin = EdgeInsets.symmetric(vertical: 0, horizontal: 8);
static const padding = EdgeInsets.symmetric(vertical: 16, horizontal: 8); static const padding = EdgeInsets.symmetric(vertical: 16, horizontal: 8);
static const widgetSpanAlignment = PlaceholderAlignment.middle; static const widgetSpanAlignment = PlaceholderAlignment.middle;
@ -68,9 +71,9 @@ class SectionHeader<T> extends StatelessWidget {
sectionKey: sectionKey, sectionKey: sectionKey,
browsingBuilder: leading != null browsingBuilder: leading != null
? (context) => Container( ? (context) => Container(
padding: const EdgeInsetsDirectional.only(end: 8),
width: leadingSize.width, width: leadingSize.width,
height: leadingSize.height, height: leadingSize.height,
margin: leadingMargin,
child: leading, child: leading,
) )
: null, : null,
@ -86,7 +89,7 @@ class SectionHeader<T> extends StatelessWidget {
WidgetSpan( WidgetSpan(
alignment: widgetSpanAlignment, alignment: widgetSpanAlignment,
child: Container( child: Container(
padding: const EdgeInsetsDirectional.only(start: 8, bottom: 2), margin: trailingMargin,
child: trailing, child: trailing,
), ),
), ),
@ -226,7 +229,7 @@ class _SectionSelectableLeading<T> extends StatelessWidget {
); );
} }
Widget _buildBrowsing(BuildContext context) => browsingBuilder?.call(context) ?? SizedBox(height: SectionHeader.leadingSize.height); Widget _buildBrowsing(BuildContext context) => browsingBuilder?.call(context) ?? SizedBox(height: SectionHeader.leadingSize.height + SectionHeader.widgetSpanAlignmentMargin.vertical);
} }
class _SectionSelectingLeading<T> extends StatelessWidget { class _SectionSelectingLeading<T> extends StatelessWidget {
@ -258,21 +261,21 @@ class _SectionSelectingLeading<T> extends StatelessWidget {
data: TooltipTheme.of(context).copyWith( data: TooltipTheme.of(context).copyWith(
preferBelow: false, preferBelow: false,
), ),
child: Padding( child: Container(
padding: const EdgeInsetsDirectional.only(end: 8, bottom: 6), width: SectionHeader.leadingSize.width,
height: SectionHeader.leadingSize.height,
margin: SectionHeader.leadingMargin,
child: Theme( child: Theme(
data: Theme.of(context).copyWith( data: Theme.of(context).copyWith(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
), ),
child: IconButton( child: IconButton(
iconSize: 26, iconSize: 26,
visualDensity: const VisualDensity(horizontal: VisualDensity.minimumDensity, vertical: VisualDensity.minimumDensity),
padding: const EdgeInsets.symmetric(horizontal: 7),
onPressed: onPressed, onPressed: onPressed,
tooltip: isSelected ? context.l10n.collectionDeselectSectionTooltip : context.l10n.collectionSelectSectionTooltip, tooltip: isSelected ? context.l10n.collectionDeselectSectionTooltip : context.l10n.collectionSelectSectionTooltip,
constraints: BoxConstraints( style: ButtonStyle(
minHeight: SectionHeader.leadingSize.height, padding: WidgetStateProperty.all<EdgeInsetsGeometry>(EdgeInsets.zero),
minWidth: SectionHeader.leadingSize.width, minimumSize: WidgetStateProperty.all<Size>(SectionHeader.leadingSize),
), ),
icon: Icon(isSelected ? AIcons.selected : AIcons.unselected), icon: Icon(isSelected ? AIcons.selected : AIcons.unselected),
), ),