diff --git a/apps/mobile/packages/design_system/lib/src/widgets/ui_app_bar.dart b/apps/mobile/packages/design_system/lib/src/widgets/ui_app_bar.dart index 77bb91b6..4394bb7e 100644 --- a/apps/mobile/packages/design_system/lib/src/widgets/ui_app_bar.dart +++ b/apps/mobile/packages/design_system/lib/src/widgets/ui_app_bar.dart @@ -1,13 +1,14 @@ +import 'package:design_system/design_system.dart'; import 'package:design_system/src/ui_typography.dart'; import 'package:flutter/material.dart'; import '../ui_icons.dart'; +import 'ui_icon_button.dart'; /// A custom AppBar for the Krow UI design system. /// /// This widget provides a consistent look and feel for top app bars across the application. class UiAppBar extends StatelessWidget implements PreferredSizeWidget { - const UiAppBar({ super.key, this.title, @@ -20,6 +21,7 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget { this.showBackButton = true, this.bottom, }); + /// The title text to display in the app bar. final String? title; @@ -53,18 +55,19 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget { @override Widget build(BuildContext context) { return AppBar( - title: titleWidget ?? - (title != null - ? Text( - title!, - style: UiTypography.headline4b, - ) - : null), - leading: leading ?? + title: + titleWidget ?? + (title != null ? Text(title!, style: UiTypography.headline4b) : null), + leading: + leading ?? (showBackButton - ? IconButton( - icon: const Icon(UiIcons.chevronLeft, size: 20), - onPressed: onLeadingPressed ?? () => Navigator.of(context).pop(), + ? UiIconButton( + icon: UiIcons.chevronLeft, + onTap: onLeadingPressed ?? () => Navigator.of(context).pop(), + backgroundColor: UiColors.transparent, + iconColor: UiColors.iconThird, + shape: BoxShape.rectangle, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), ) : null), actions: actions, @@ -74,5 +77,6 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget { } @override - Size get preferredSize => Size.fromHeight(height + (bottom?.preferredSize.height ?? 0.0)); + Size get preferredSize => + Size.fromHeight(height + (bottom?.preferredSize.height ?? 0.0)); } diff --git a/apps/mobile/packages/design_system/lib/src/widgets/ui_icon_button.dart b/apps/mobile/packages/design_system/lib/src/widgets/ui_icon_button.dart index bfa717e5..dca4aff9 100644 --- a/apps/mobile/packages/design_system/lib/src/widgets/ui_icon_button.dart +++ b/apps/mobile/packages/design_system/lib/src/widgets/ui_icon_button.dart @@ -16,6 +16,8 @@ class UiIconButton extends StatelessWidget { required this.iconColor, this.useBlur = false, this.onTap, + this.shape = BoxShape.circle, + this.borderRadius, }); /// Creates a primary variant icon button with solid background. @@ -25,6 +27,8 @@ class UiIconButton extends StatelessWidget { this.size = 40, this.iconSize = 20, this.onTap, + this.shape = BoxShape.circle, + this.borderRadius, }) : backgroundColor = UiColors.primary, iconColor = UiColors.white, useBlur = false; @@ -36,6 +40,8 @@ class UiIconButton extends StatelessWidget { this.size = 40, this.iconSize = 20, this.onTap, + this.shape = BoxShape.circle, + this.borderRadius, }) : backgroundColor = UiColors.primary.withAlpha(96), iconColor = UiColors.primary, useBlur = true; @@ -60,13 +66,23 @@ class UiIconButton extends StatelessWidget { /// Callback when the button is tapped. final VoidCallback? onTap; + /// The shape of the button (circle or rectangle). + final BoxShape shape; + + /// The border radius for rectangle shape. + final BorderRadius? borderRadius; + @override /// Builds the icon button UI. Widget build(BuildContext context) { final Widget button = Container( width: size, height: size, - decoration: BoxDecoration(color: backgroundColor, shape: BoxShape.circle), + decoration: BoxDecoration( + color: backgroundColor, + shape: shape, + borderRadius: shape == BoxShape.rectangle ? borderRadius : null, + ), child: Icon(icon, color: iconColor, size: iconSize), );