From 4709a9c6e5dc3725ea9f70d7ae7d3d6e95191e31 Mon Sep 17 00:00:00 2001 From: Daniel Eshkeri Date: Mon, 4 Nov 2024 15:12:55 +0000 Subject: [PATCH] fix: banner title alignment when centered --- .../lib/pages/components/banner_example.dart | 14 ++-- .../pages/components/banner_widgetbook.dart | 2 +- lib/src/components/banner/banner.dart | 73 ++++++++++++++----- 3 files changed, 61 insertions(+), 28 deletions(-) diff --git a/example/lib/pages/components/banner_example.dart b/example/lib/pages/components/banner_example.dart index 800879fc..9fb2a5c2 100644 --- a/example/lib/pages/components/banner_example.dart +++ b/example/lib/pages/components/banner_example.dart @@ -23,7 +23,7 @@ class BannerExample extends StatelessWidget { type: ZetaBannerStatus.primary, title: 'Centered', context: context, - titleStart: true, + titleCenter: true, leadingIcon: ZetaIcons.info, ), ZetaBanner( @@ -35,13 +35,13 @@ class BannerExample extends StatelessWidget { type: ZetaBannerStatus.primary, context: context, title: 'Title left with arrow', - titleStart: true, + titleCenter: true, trailing: ZetaIcon(ZetaIcons.chevron_right), ), ZetaBanner( type: ZetaBannerStatus.primary, title: 'Title left + Icon', - titleStart: true, + titleCenter: true, context: context, leadingIcon: ZetaIcons.info, ), @@ -49,7 +49,7 @@ class BannerExample extends StatelessWidget { type: ZetaBannerStatus.primary, context: context, title: 'Title left + Icon with Arrow', - titleStart: true, + titleCenter: true, leadingIcon: ZetaIcons.info, trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), @@ -71,7 +71,7 @@ class BannerExample extends StatelessWidget { type: ZetaBannerStatus.positive, context: context, title: 'Centered', - titleStart: true, + titleCenter: true, leadingIcon: ZetaIcons.info, trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), @@ -92,7 +92,7 @@ class BannerExample extends StatelessWidget { type: ZetaBannerStatus.warning, title: 'Centered', context: context, - titleStart: true, + titleCenter: true, leadingIcon: ZetaIcons.info, trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), @@ -113,7 +113,7 @@ class BannerExample extends StatelessWidget { type: ZetaBannerStatus.negative, title: 'Centered', context: context, - titleStart: true, + titleCenter: true, leadingIcon: ZetaIcons.info, trailing: IconButton( icon: ZetaIcon(ZetaIcons.chevron_right), diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index 9061c6d5..569262c8 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -15,7 +15,7 @@ Widget bannerUseCase(BuildContext context) { labelBuilder: enumLabelBuilder, ), leadingIcon: iconKnob(context, nullable: true), - titleStart: context.knobs.boolean(label: 'Center title'), + titleCenter: context.knobs.boolean(label: 'Center title'), trailing: ZetaIcon(iconKnob( context, nullable: true, diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart index ae7e5ebd..1cec0774 100644 --- a/lib/src/components/banner/banner.dart +++ b/lib/src/components/banner/banner.dart @@ -49,7 +49,10 @@ class ZetaBanner extends MaterialBanner { ZetaBannerStatus type = ZetaBannerStatus.primary, /// Whether the title should be centered. - bool titleStart = false, + bool titleCenter = false, + + /// Whether the title should be centered. + @Deprecated('Use titleCenter instead. ' 'This widget has been renamed as of 0.18.0') bool? titleStart, /// The trailing widget for the banner. Widget? trailing, @@ -80,6 +83,8 @@ class ZetaBanner extends MaterialBanner { } } + // ignore: no_leading_underscores_for_local_identifiers + final _titleCenter = titleStart ?? titleCenter; return ZetaRoundedScope( rounded: rounded ?? context.rounded, child: Semantics( @@ -89,26 +94,41 @@ class ZetaBanner extends MaterialBanner { color: foregroundColor, overflow: TextOverflow.ellipsis, ), - child: Row( - mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start, + child: Stack( + alignment: _titleCenter ? Alignment.center : Alignment.centerLeft, children: [ if (leadingIcon != null) - Padding( - padding: EdgeInsets.only(right: Zeta.of(context).spacing.small), - child: Icon( - leadingIcon, - color: foregroundColor, - size: Zeta.of(context).spacing.xl_2, + Positioned( + left: 0, + child: Padding( + padding: EdgeInsets.only(right: Zeta.of(context).spacing.small), + child: Icon( + leadingIcon, + color: foregroundColor, + size: Zeta.of(context).spacing.xl_2, + ), ), ), - Flexible( - child: Text( - title, - style: ZetaTextStyles.labelLarge.copyWith( - color: Zeta.of(context).colors.textInverse, + Padding( + padding: + !_titleCenter && leadingIcon != null ? const EdgeInsets.only(left: 40) : EdgeInsets.zero, + child: Flexible( + child: Text( + title, + style: ZetaTextStyles.labelLarge.copyWith( + color: Zeta.of(context).colors.textInverse, + ), ), ), ), + if (trailing != null) + Positioned( + right: 0, + child: IconTheme( + data: IconThemeData(color: _backgroundColorFromType(context, type).onColor), + child: trailing, + ), + ), ], ), ), @@ -117,12 +137,7 @@ class ZetaBanner extends MaterialBanner { }, ), backgroundColor: _backgroundColorFromType(context, type), - actions: [ - IconTheme( - data: IconThemeData(color: _backgroundColorFromType(context, type).onColor), - child: trailing ?? const Nothing(), - ), - ], + actions: [const Nothing()], ); static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaBannerStatus type) { @@ -139,4 +154,22 @@ class ZetaBanner extends MaterialBanner { return zeta.colors.surfaceNegative; } } + + // static Widget _getTitle(bool titleStart, String title, BuildContext context) { + // if (titleStart) { + // return + // } else { + // return Positioned( + // left: 10, + // child: Flexible( + // child: Text( + // title, + // style: ZetaTextStyles.labelLarge.copyWith( + // color: Zeta.of(context).colors.textInverse, + // ), + // ), + // ), + // ); + // } + // } }