From c46788d46b77d785fa023954219c53d51fa7952b Mon Sep 17 00:00:00 2001 From: Luke Walton Date: Thu, 16 May 2024 16:06:40 +0100 Subject: [PATCH] chore: minorbugs (#72) fix: Remove calls to zeta in button that are not needed fix: enable mouse region on desktop for selectable areas fix: Correct colors on Radio button hover / focus states fix: breadcrumb rounded icon fix: navigation bar text color chore: Correct syntax on buttongroup.copywith chore: rename ZetaAppbar to ZetaTopAppBar to be match designs chore: rename ZetaBadge to ZetaLabel to match designs chore: rename ZetaSystemBanner to ZetaBanner to match designs chore: reorganize directories to match designs --- example/lib/home.dart | 4 +- ..._example.dart => top_app_bar_example.dart} | 28 ++-- example/widgetbook/main.dart | 8 +- .../pages/components/dialog_widgetbook.dart | 3 - ...tbook.dart => top_app_bar_widgetbook.dart} | 25 ++-- lib/src/components/buttons/button.dart | 17 +-- lib/src/components/buttons/button_group.dart | 30 ++-- lib/src/components/dialog/dialog.dart | 8 +- .../navigation_rail/navigation_rail.dart | 1 + lib/src/components/radio/radio.dart | 128 +++++++++++------- .../screen_header_bar/screen_header_bar.dart | 2 +- .../segmented_control/segmented_control.dart | 2 +- .../top_app_bar.dart} | 30 ++-- lib/zeta_flutter.dart | 2 +- 14 files changed, 148 insertions(+), 140 deletions(-) rename example/lib/pages/components/{app_bar_example.dart => top_app_bar_example.dart} (89%) rename example/widgetbook/pages/components/{app_bar_widgetbook.dart => top_app_bar_widgetbook.dart} (88%) rename lib/src/components/{app_bar/app_bar.dart => top_app_bar/top_app_bar.dart} (93%) diff --git a/example/lib/home.dart b/example/lib/home.dart index 5bf66363..7dd6bfa0 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:zeta_example/pages/components/accordion_example.dart'; -import 'package:zeta_example/pages/components/app_bar_example.dart'; import 'package:zeta_example/pages/components/avatar_example.dart'; import 'package:zeta_example/pages/components/badges_example.dart'; import 'package:zeta_example/pages/components/banner_example.dart'; @@ -35,6 +34,7 @@ import 'package:zeta_example/pages/components/tabs_example.dart'; import 'package:zeta_example/pages/components/pagination_example.dart'; import 'package:zeta_example/pages/components/time_input_example.dart'; import 'package:zeta_example/pages/components/tooltip_example.dart'; +import 'package:zeta_example/pages/components/top_app_bar_example.dart'; import 'package:zeta_example/pages/theme/color_example.dart'; import 'package:zeta_example/pages/components/password_input_example.dart'; import 'package:zeta_example/pages/components/progress_example.dart'; @@ -54,7 +54,7 @@ class Component { final List components = [ Component(AccordionExample.name, (context) => const AccordionExample()), - Component(AppBarExample.name, (context) => const AppBarExample()), + Component(TopAppBarExample.name, (context) => const TopAppBarExample()), Component(AvatarExample.name, (context) => const AvatarExample()), Component(BannerExample.name, (context) => const BannerExample()), Component(BadgesExample.name, (context) => const BadgesExample()), diff --git a/example/lib/pages/components/app_bar_example.dart b/example/lib/pages/components/top_app_bar_example.dart similarity index 89% rename from example/lib/pages/components/app_bar_example.dart rename to example/lib/pages/components/top_app_bar_example.dart index 250bc8a7..8504c0a6 100644 --- a/example/lib/pages/components/app_bar_example.dart +++ b/example/lib/pages/components/top_app_bar_example.dart @@ -4,16 +4,16 @@ import 'package:flutter/material.dart'; import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -class AppBarExample extends StatefulWidget { - const AppBarExample({super.key}); +class TopAppBarExample extends StatefulWidget { + const TopAppBarExample({super.key}); - static const String name = 'AppBar'; + static const String name = 'TopAppBar'; @override - State createState() => _AppBarExampleState(); + State createState() => _TopAppBarExampleState(); } -class _AppBarExampleState extends State { +class _TopAppBarExampleState extends State { late final _searchController = AppBarSearchController(); void _showHideSearch() { @@ -23,14 +23,14 @@ class _AppBarExampleState extends State { @override Widget build(BuildContext context) { return ExampleScaffold( - name: AppBarExample.name, + name: TopAppBarExample.name, child: SingleChildScrollView( child: Column( children: [ // Default Padding( padding: const EdgeInsets.only(top: ZetaSpacing.x4), - child: ZetaAppBar( + child: ZetaTopAppBar( leading: IconButton( onPressed: () {}, icon: Icon(Icons.menu_rounded), @@ -64,8 +64,8 @@ class _AppBarExampleState extends State { // Centered Padding( padding: const EdgeInsets.only(top: ZetaSpacing.x4), - child: ZetaAppBar( - type: ZetaAppBarType.centeredTitle, + child: ZetaTopAppBar( + type: ZetaTopAppBarType.centeredTitle, leading: IconButton( onPressed: () {}, icon: Icon(Icons.menu_rounded), @@ -83,7 +83,7 @@ class _AppBarExampleState extends State { // Contextual Padding( padding: const EdgeInsets.only(top: ZetaSpacing.x4), - child: ZetaAppBar( + child: ZetaTopAppBar( leading: IconButton( onPressed: () {}, icon: Icon(ZetaIcons.close_round), @@ -115,8 +115,8 @@ class _AppBarExampleState extends State { padding: const EdgeInsets.only(top: ZetaSpacing.x4), child: Column( children: [ - ZetaAppBar( - type: ZetaAppBarType.centeredTitle, + ZetaTopAppBar( + type: ZetaTopAppBarType.centeredTitle, leading: BackButton(), title: Text("Title"), actions: [ @@ -151,8 +151,8 @@ class _AppBarExampleState extends State { // Extended Padding( padding: const EdgeInsets.only(top: ZetaSpacing.x4), - child: ZetaAppBar( - type: ZetaAppBarType.extendedTitle, + child: ZetaTopAppBar( + type: ZetaTopAppBarType.extendedTitle, leading: IconButton( onPressed: () {}, icon: Icon(Icons.menu), diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart index f8cf98e3..90d3927b 100644 --- a/example/widgetbook/main.dart +++ b/example/widgetbook/main.dart @@ -4,7 +4,7 @@ import 'package:zeta_flutter/zeta_flutter.dart'; import 'pages/assets/icon_widgetbook.dart'; import 'pages/components/accordion_widgetbook.dart'; -import 'pages/components/app_bar_widgetbook.dart'; +import 'pages/components/top_app_bar_widgetbook.dart'; import 'pages/components/avatar_widgetbook.dart'; import 'pages/components/badges_widgetbook.dart'; import 'pages/components/banner_widgetbook.dart'; @@ -62,10 +62,10 @@ class HotReload extends StatelessWidget { isInitiallyExpanded: false, children: [ WidgetbookComponent( - name: 'App Bar', + name: 'Top App Bar', useCases: [ - WidgetbookUseCase(name: 'Default', builder: (context) => defaultAppBarUseCase(context)), - WidgetbookUseCase(name: 'Search', builder: (context) => searchAppBarUseCase(context)), + WidgetbookUseCase(name: 'Default', builder: (context) => defaultTopAppBarUseCase(context)), + WidgetbookUseCase(name: 'Search', builder: (context) => searchTopAppBarUseCase(context)), ], ), WidgetbookComponent( diff --git a/example/widgetbook/pages/components/dialog_widgetbook.dart b/example/widgetbook/pages/components/dialog_widgetbook.dart index d00f4381..9ade978e 100644 --- a/example/widgetbook/pages/components/dialog_widgetbook.dart +++ b/example/widgetbook/pages/components/dialog_widgetbook.dart @@ -39,7 +39,6 @@ Widget dialogUseCase(BuildContext context) { onPressed: () => showZetaDialog( context, useRootNavigator: false, - zeta: zeta, rounded: rounded, barrierDismissible: barrierDismissible, headerAlignment: headerAlignment, @@ -57,7 +56,6 @@ Widget dialogUseCase(BuildContext context) { onPressed: () => showZetaDialog( context, useRootNavigator: false, - zeta: zeta, rounded: rounded, barrierDismissible: barrierDismissible, headerAlignment: headerAlignment, @@ -76,7 +74,6 @@ Widget dialogUseCase(BuildContext context) { onPressed: () => showZetaDialog( context, useRootNavigator: false, - zeta: zeta, rounded: rounded, barrierDismissible: barrierDismissible, headerAlignment: headerAlignment, diff --git a/example/widgetbook/pages/components/app_bar_widgetbook.dart b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart similarity index 88% rename from example/widgetbook/pages/components/app_bar_widgetbook.dart rename to example/widgetbook/pages/components/top_app_bar_widgetbook.dart index 097cdaf1..b79cc865 100644 --- a/example/widgetbook/pages/components/app_bar_widgetbook.dart +++ b/example/widgetbook/pages/components/top_app_bar_widgetbook.dart @@ -6,20 +6,19 @@ import 'package:zeta_flutter/zeta_flutter.dart'; import '../../test/test_components.dart'; -Widget defaultAppBarUseCase(BuildContext context) { +Widget defaultTopAppBarUseCase(BuildContext context) { return WidgetbookTestWidget( widget: StatefulBuilder( builder: (context, setState) { final title = context.knobs.string(label: "Title", initialValue: "Title"); - final type = context.knobs.list( label: "Type", options: [ - ZetaAppBarType.defaultAppBar, - ZetaAppBarType.centeredTitle, - ZetaAppBarType.extendedTitle, + ZetaTopAppBarType.defaultAppBar, + ZetaTopAppBarType.centeredTitle, + ZetaTopAppBarType.extendedTitle, ], - initialOption: ZetaAppBarType.defaultAppBar, + initialOption: ZetaTopAppBarType.defaultAppBar, labelBuilder: (type) => type.name, ); @@ -48,7 +47,7 @@ Widget defaultAppBarUseCase(BuildContext context) { labelBuilder: (icon) => icon.key.toString(), ); - return ZetaAppBar( + return ZetaTopAppBar( leading: IconButton( onPressed: () {}, icon: leadingIcon, @@ -77,7 +76,7 @@ Widget defaultAppBarUseCase(BuildContext context) { ); } -Widget searchAppBarUseCase(BuildContext context) { +Widget searchTopAppBarUseCase(BuildContext context) { return WidgetbookTestWidget( widget: _SearchUseCase(), ); @@ -100,11 +99,11 @@ class _SearchUseCaseState extends State<_SearchUseCase> { final type = context.knobs.list( label: "Type", options: [ - ZetaAppBarType.defaultAppBar, - ZetaAppBarType.centeredTitle, - ZetaAppBarType.extendedTitle, + ZetaTopAppBarType.defaultAppBar, + ZetaTopAppBarType.centeredTitle, + ZetaTopAppBarType.extendedTitle, ], - initialOption: ZetaAppBarType.defaultAppBar, + initialOption: ZetaTopAppBarType.defaultAppBar, labelBuilder: (type) => type.name, ); @@ -135,7 +134,7 @@ class _SearchUseCaseState extends State<_SearchUseCase> { initialValue: false, ); - return ZetaAppBar( + return ZetaTopAppBar( leading: IconButton( onPressed: () {}, icon: leadingIcon, diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart index 18619b52..b7e93f4f 100644 --- a/lib/src/components/buttons/button.dart +++ b/lib/src/components/buttons/button.dart @@ -12,7 +12,6 @@ class ZetaButton extends StatelessWidget { this.type = ZetaButtonType.primary, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -24,7 +23,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -36,7 +34,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -48,7 +45,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -60,7 +56,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -72,7 +67,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -84,7 +78,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -96,7 +89,6 @@ class ZetaButton extends StatelessWidget { this.onPressed, this.size = ZetaWidgetSize.medium, this.borderType = ZetaWidgetBorder.rounded, - this.zeta, this.leadingIcon, this.trailingIcon, super.key, @@ -118,11 +110,7 @@ class ZetaButton extends StatelessWidget { /// Size of the button. Defaults to large. final ZetaWidgetSize size; - /// Sometimes we need to pass Zeta from outside, - /// like for example from [showZetaDialog] - final Zeta? zeta; - - /// Leading icon of button. Goes infront of button. + /// Leading icon of button. Goes in front of button. final IconData? leadingIcon; /// Trailing icon of button. Goes behind button. @@ -145,7 +133,6 @@ class ZetaButton extends StatelessWidget { type: type ?? this.type, size: size ?? this.size, borderType: borderType ?? this.borderType, - zeta: zeta, leadingIcon: leadingIcon ?? this.leadingIcon, trailingIcon: trailingIcon ?? this.trailingIcon, key: key ?? this.key, @@ -154,7 +141,7 @@ class ZetaButton extends StatelessWidget { @override Widget build(BuildContext context) { - final zeta = this.zeta ?? Zeta.of(context); + final zeta = Zeta.of(context); final colors = zeta.colors; return ConstrainedBox( constraints: BoxConstraints(minHeight: _minConstraints, minWidth: _minConstraints), diff --git a/lib/src/components/buttons/button_group.dart b/lib/src/components/buttons/button_group.dart index a89f5064..001a4e60 100644 --- a/lib/src/components/buttons/button_group.dart +++ b/lib/src/components/buttons/button_group.dart @@ -41,11 +41,11 @@ class ZetaButtonGroup extends StatelessWidget { for (final (index, button) in buttons.indexed) { mappedButtons.add( button.copyWith( - large: isLarge, - inverse: isInverse, - round: rounded, - fin: index == buttons.length - 1, - initial: index == 0, + isLarge: isLarge, + isInverse: isInverse, + rounded: rounded, + isFinal: index == buttons.length - 1, + isInitial: index == 0, ), ); } @@ -153,11 +153,11 @@ class ZetaGroupButton extends StatefulWidget { /// Returns copy of [ZetaGroupButton] with fields. ZetaGroupButton copyWith({ - bool? fin, - bool? initial, - bool? large, - bool? round, - bool? inverse, + bool? isFinal, + bool? isInitial, + bool? isLarge, + bool? rounded, + bool? isInverse, }) { return ZetaGroupButton._( key: key, @@ -165,11 +165,11 @@ class ZetaGroupButton extends StatefulWidget { icon: icon, onPressed: onPressed, dropdown: dropdown, - isFinal: fin ?? isFinal, - isInitial: initial ?? isInitial, - isLarge: large ?? isLarge, - rounded: round ?? rounded, - isInverse: inverse ?? isInverse, + isFinal: isFinal ?? this.isFinal, + isInitial: isInitial ?? this.isInitial, + isLarge: isLarge ?? this.isLarge, + rounded: rounded ?? this.rounded, + isInverse: isInverse ?? this.isInverse, ); } diff --git a/lib/src/components/dialog/dialog.dart b/lib/src/components/dialog/dialog.dart index 22068383..f490ebd6 100644 --- a/lib/src/components/dialog/dialog.dart +++ b/lib/src/components/dialog/dialog.dart @@ -14,7 +14,6 @@ enum ZetaDialogHeaderAlignment { /// [showZetaDialog] Future showZetaDialog( BuildContext context, { - Zeta? zeta, ZetaDialogHeaderAlignment headerAlignment = ZetaDialogHeaderAlignment.center, Widget? icon, String? title, @@ -34,7 +33,6 @@ Future showZetaDialog( barrierDismissible: barrierDismissible, useRootNavigator: useRootNavigator, builder: (_) => _ZetaDialog( - zeta: zeta, headerAlignment: headerAlignment, icon: icon, title: title, @@ -62,7 +60,6 @@ class _ZetaDialog extends StatelessWidget { this.tertiaryButtonLabel, this.onTertiaryButtonPressed, this.rounded = true, - this.zeta, }); final ZetaDialogHeaderAlignment headerAlignment; @@ -76,15 +73,13 @@ class _ZetaDialog extends StatelessWidget { final String? tertiaryButtonLabel; final VoidCallback? onTertiaryButtonPressed; final bool rounded; - final Zeta? zeta; @override Widget build(BuildContext context) { - final zeta = this.zeta ?? Zeta.of(context); + final zeta = Zeta.of(context); final primaryButton = primaryButtonLabel == null ? null : ZetaButton( - zeta: zeta, label: primaryButtonLabel!, onPressed: onPrimaryButtonPressed ?? () => Navigator.of(context).pop(true), borderType: rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, @@ -92,7 +87,6 @@ class _ZetaDialog extends StatelessWidget { final secondaryButton = secondaryButtonLabel == null ? null : ZetaButton.outlineSubtle( - zeta: zeta, label: secondaryButtonLabel!, onPressed: onSecondaryButtonPressed ?? () => Navigator.of(context).pop(false), borderType: rounded ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, diff --git a/lib/src/components/navigation_rail/navigation_rail.dart b/lib/src/components/navigation_rail/navigation_rail.dart index 1fbfc4dc..5befe5a4 100644 --- a/lib/src/components/navigation_rail/navigation_rail.dart +++ b/lib/src/components/navigation_rail/navigation_rail.dart @@ -135,6 +135,7 @@ class _ZetaNavigationRailItemContent extends StatelessWidget { Widget build(BuildContext context) { final zeta = Zeta.of(context); return MouseRegion( + cursor: disabled ? SystemMouseCursors.forbidden : SystemMouseCursors.click, child: GestureDetector( behavior: HitTestBehavior.translucent, onTap: disabled ? null : onTap, diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart index 1ac8e8fa..ab5292b1 100644 --- a/lib/src/components/radio/radio.dart +++ b/lib/src/components/radio/radio.dart @@ -5,7 +5,7 @@ import '../../../zeta_flutter.dart'; /// Zeta Radio Button /// -/// Radio Button can select one single option from a goup of different options. +/// Radio Button can select one single option from a group of different options. class ZetaRadio extends StatefulWidget { /// Constructor for [ZetaRadio]. const ZetaRadio({ @@ -44,55 +44,71 @@ class ZetaRadio extends StatefulWidget { } class _ZetaRadioState extends State> with TickerProviderStateMixin, ToggleableStateMixin { - final ToggleablePainter _painter = _RadioPainter(); + ToggleablePainter? _painter; + bool _isHovered = false; @override Widget build(BuildContext context) { final zetaColors = Zeta.of(context).colors; - return Row( - mainAxisSize: MainAxisSize.min, - children: [ - Semantics( - inMutuallyExclusiveGroup: true, - checked: widget._selected, - selected: value, - child: buildToggleable( - size: const Size(36, 36), - painter: _painter - ..position = position - ..reaction = reaction - ..reactionFocusFade = reactionFocusFade - ..reactionHoverFade = reactionHoverFade - ..inactiveReactionColor = Colors.transparent - ..reactionColor = Colors.transparent - ..hoverColor = Colors.transparent - ..focusColor = zetaColors.blue.shade50 - ..splashRadius = 12 - ..downPosition = downPosition - ..isFocused = states.contains(WidgetState.focused) - ..isHovered = states.contains(WidgetState.hovered) - ..activeColor = states.contains(WidgetState.disabled) ? zetaColors.cool.shade30 : zetaColors.blue.shade60 - ..inactiveColor = - states.contains(WidgetState.disabled) ? zetaColors.cool.shade30 : zetaColors.cool.shade70, - mouseCursor: WidgetStateProperty.all( - WidgetStateProperty.resolveAs( - WidgetStateMouseCursor.clickable, - states, + _painter ??= _RadioPainter(colors: zetaColors); + return Semantics( + inMutuallyExclusiveGroup: true, + checked: widget._selected, + selected: value, + excludeSemantics: true, + child: MouseRegion( + onEnter: (_) => setState(() => _isHovered = true), + onExit: (_) => setState(() => _isHovered = false), + cursor: states.contains(WidgetState.disabled) ? SystemMouseCursors.forbidden : SystemMouseCursors.click, + child: SelectionContainer.disabled( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + buildToggleable( + size: const Size(ZetaSpacing.x9, ZetaSpacing.x9), + painter: _painter! + ..position = position + ..reaction = reaction + ..reactionFocusFade = reactionFocusFade + ..reactionHoverFade = reactionHoverFade + ..inactiveReactionColor = Colors.transparent + ..reactionColor = Colors.transparent + ..hoverColor = Colors.transparent + ..focusColor = zetaColors.blue.shade50 + ..splashRadius = ZetaSpacing.x3 + ..downPosition = downPosition + ..isFocused = states.contains(WidgetState.focused) + ..isHovered = states.contains(WidgetState.hovered) + ..activeColor = _isHovered + ? zetaColors.cool.shade90 + : states.contains(WidgetState.disabled) + ? zetaColors.cool.shade30 + : zetaColors.blue.shade60 + ..inactiveColor = _isHovered + ? zetaColors.cool.shade90 + : states.contains(WidgetState.disabled) + ? zetaColors.cool.shade30 + : states.contains(WidgetState.focused) + ? zetaColors.blue.shade50 + : zetaColors.cool.shade70, + mouseCursor: WidgetStateProperty.all( + states.contains(WidgetState.disabled) ? SystemMouseCursors.forbidden : SystemMouseCursors.click, + ), ), - ), + if (widget.label != null) + GestureDetector( + onTap: () => onChanged?.call(true), + child: DefaultTextStyle( + style: ZetaTextStyles.bodyMedium.copyWith( + color: states.contains(WidgetState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault, + height: 1.33, + ), + child: widget.label!, + ), + ), + ], ), ), - if (widget.label != null) - GestureDetector( - onTap: () => onChanged?.call(true), - child: DefaultTextStyle( - style: ZetaTextStyles.bodyMedium.copyWith( - color: states.contains(WidgetState.disabled) ? zetaColors.textDisabled : zetaColors.textDefault, - height: 1.33, - ), - child: widget.label!, - ), - ), - ], + ), ); } @@ -125,7 +141,7 @@ class _ZetaRadioState extends State> with TickerProviderStateMix @override void dispose() { - _painter.dispose(); + _painter?.dispose(); super.dispose(); } } @@ -134,17 +150,31 @@ const double _kOuterRadius = 10; const double _kInnerRadius = 5; class _RadioPainter extends ToggleablePainter { + _RadioPainter({required this.colors}); + + final ZetaColors colors; + @override void paint(Canvas canvas, Size size) { paintRadialReaction(canvas: canvas, origin: size.center(Offset.zero)); - final Offset center = (Offset.zero & size).center; - // Outer circle + // Background mask for focus final Paint paint = Paint() - ..color = Color.lerp(inactiveColor, activeColor, position.value)! + ..color = colors.surfacePrimary + ..style = PaintingStyle.stroke + ..strokeWidth = ZetaSpacing.x2_5; + if (isFocused) canvas.drawCircle(center, _kInnerRadius, paint); + + // Outer circle + paint + ..color = isHovered + ? colors.black + : position.isDismissed + ? inactiveColor + : activeColor ..style = PaintingStyle.stroke - ..strokeWidth = 2; + ..strokeWidth = ZetaSpacing.x0_5; canvas.drawCircle(center, _kOuterRadius, paint); // Inner circle diff --git a/lib/src/components/screen_header_bar/screen_header_bar.dart b/lib/src/components/screen_header_bar/screen_header_bar.dart index 6a846778..2760038f 100644 --- a/lib/src/components/screen_header_bar/screen_header_bar.dart +++ b/lib/src/components/screen_header_bar/screen_header_bar.dart @@ -27,7 +27,7 @@ class ZetaScreenHeaderBar extends StatelessWidget { @override Widget build(BuildContext context) { - return ZetaAppBar( + return ZetaTopAppBar( leading: IconButton( onPressed: () async => Navigator.maybePop(context), icon: Icon(rounded ? ZetaIcons.chevron_left_round : ZetaIcons.chevron_left_sharp), diff --git a/lib/src/components/segmented_control/segmented_control.dart b/lib/src/components/segmented_control/segmented_control.dart index 43868eec..250ef740 100644 --- a/lib/src/components/segmented_control/segmented_control.dart +++ b/lib/src/components/segmented_control/segmented_control.dart @@ -123,7 +123,7 @@ class _ZetaSegmentedControlState extends State> final colors = Zeta.of(context).colors; return MouseRegion( - cursor: kIsWeb ? SystemMouseCursors.click : MouseCursor.defer, + cursor: SystemMouseCursors.click, child: SelectionContainer.disabled( child: Container( padding: const EdgeInsets.all(ZetaSpacing.xxs), diff --git a/lib/src/components/app_bar/app_bar.dart b/lib/src/components/top_app_bar/top_app_bar.dart similarity index 93% rename from lib/src/components/app_bar/app_bar.dart rename to lib/src/components/top_app_bar/top_app_bar.dart index 158a0a3c..a3ea0282 100644 --- a/lib/src/components/app_bar/app_bar.dart +++ b/lib/src/components/top_app_bar/top_app_bar.dart @@ -3,9 +3,9 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; /// Zeta app bar. -class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget { +class ZetaTopAppBar extends StatefulWidget implements PreferredSizeWidget { /// Creates a Zeta app bar. - const ZetaAppBar({ + const ZetaTopAppBar({ this.actions, this.automaticallyImplyLeading = true, this.searchController, @@ -13,7 +13,7 @@ class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget { this.title, this.titleSpacing, this.titleTextStyle, - this.type = ZetaAppBarType.defaultAppBar, + this.type = ZetaTopAppBarType.defaultAppBar, this.onSearch, this.searchHintText = 'Search', this.onSearchMicrophoneIconPressed, @@ -51,10 +51,10 @@ class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget { final TextStyle? titleTextStyle; /// Defines the styles of the app bar. - final ZetaAppBarType type; + final ZetaTopAppBarType type; @override - State createState() => _ZetaAppBarState(); + State createState() => _ZetaTopAppBarState(); @override Size get preferredSize => const Size.fromHeight(kToolbarHeight); @@ -84,14 +84,14 @@ class ZetaAppBar extends StatefulWidget implements PreferredSizeWidget { ), ) ..add(StringProperty('searchHintText', searchHintText)) - ..add(EnumProperty('type', type)) - ..add(EnumProperty('type', type)) + ..add(EnumProperty('type', type)) + ..add(EnumProperty('type', type)) ..add(DoubleProperty('titleSpacing', titleSpacing)) ..add(DiagnosticsProperty('titleTextStyle', titleTextStyle)); } } -class _ZetaAppBarState extends State { +class _ZetaTopAppBarState extends State { bool _isSearchEnabled = false; @override @@ -114,7 +114,7 @@ class _ZetaAppBarState extends State { } Widget? _getTitle() { - return widget.type != ZetaAppBarType.extendedTitle + return widget.type != ZetaTopAppBarType.extendedTitle ? Padding( padding: EdgeInsets.symmetric(horizontal: widget.titleSpacing ?? ZetaSpacing.b), child: widget.title, @@ -140,7 +140,7 @@ class _ZetaAppBarState extends State { leadingWidth: ZetaSpacing.x10, leading: widget.leading, automaticallyImplyLeading: widget.automaticallyImplyLeading, - centerTitle: widget.type == ZetaAppBarType.centeredTitle, + centerTitle: widget.type == ZetaTopAppBarType.centeredTitle, titleSpacing: 0, titleTextStyle: widget.titleTextStyle == null ? ZetaTextStyles.bodyLarge.copyWith( @@ -192,7 +192,7 @@ class _ZetaAppBarState extends State { ), ] : widget.actions, - flexibleSpace: widget.type == ZetaAppBarType.extendedTitle + flexibleSpace: widget.type == ZetaTopAppBarType.extendedTitle ? Padding( padding: EdgeInsets.only( top: widget.preferredSize.height, @@ -214,7 +214,7 @@ class _ZetaAppBarState extends State { } /// Defines the style of the app bar. -enum ZetaAppBarType { +enum ZetaTopAppBarType { /// Title positioned on the left side. defaultAppBar, @@ -238,7 +238,7 @@ class _SearchField extends StatefulWidget { final Widget? child; final String hintText; final AppBarSearchController? searchController; - final ZetaAppBarType type; + final ZetaTopAppBarType type; @override State<_SearchField> createState() => _SearchFieldState(); @@ -260,7 +260,7 @@ class _SearchField extends StatefulWidget { searchController, ), ) - ..add(EnumProperty('type', type)); + ..add(EnumProperty('type', type)); } } @@ -358,7 +358,7 @@ class _SearchFieldState extends State<_SearchField> with SingleTickerProviderSta children: [ Row( mainAxisAlignment: - widget.type == ZetaAppBarType.centeredTitle ? MainAxisAlignment.center : MainAxisAlignment.start, + widget.type == ZetaTopAppBarType.centeredTitle ? MainAxisAlignment.center : MainAxisAlignment.start, children: [ widget.child ?? const SizedBox(), ], diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index 6917cd54..32706fbc 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -3,7 +3,6 @@ library zeta_flutter; export 'src/assets/icons.dart'; export 'src/components/accordion/accordion.dart'; -export 'src/components/app_bar/app_bar.dart'; export 'src/components/avatars/avatar.dart'; export 'src/components/badges/badge.dart'; export 'src/components/badges/indicator.dart'; @@ -52,6 +51,7 @@ export 'src/components/tabs/tab.dart'; export 'src/components/tabs/tab_bar.dart'; export 'src/components/time_input/time_input.dart'; export 'src/components/tooltip/tooltip.dart'; +export 'src/components/top_app_bar/top_app_bar.dart'; export 'src/theme/color_extensions.dart'; export 'src/theme/color_scheme.dart'; export 'src/theme/color_swatch.dart';