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..ab4c37f3 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 attribute 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,19 +94,24 @@ 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( + Padding( + padding: + !_titleCenter && leadingIcon != null ? const EdgeInsets.only(left: 40) : EdgeInsets.zero, child: Text( title, style: ZetaTextStyles.labelLarge.copyWith( @@ -109,6 +119,14 @@ class ZetaBanner extends MaterialBanner { ), ), ), + if (trailing != null) + Positioned( + right: 0, + child: IconTheme( + data: IconThemeData(color: _backgroundColorFromType(context, type).onColor), + child: trailing, + ), + ), ], ), ), @@ -117,12 +135,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) {