diff --git a/lib/src/yaru_expandable.dart b/lib/src/yaru_expandable.dart index 14520fbe0..6e1a2a439 100644 --- a/lib/src/yaru_expandable.dart +++ b/lib/src/yaru_expandable.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:yaru_widgets/yaru_widgets.dart'; const _kAnimationDuration = Duration(milliseconds: 250); const _kAnimationCurve = Curves.easeInOutCubic; @@ -53,14 +54,16 @@ class _YaruExpandableState extends State { GestureDetector( onTap: () => setState(() => _isExpanded = !_isExpanded), child: widget.header), - IconButton( - splashRadius: 20, - onPressed: () => setState(() => _isExpanded = !_isExpanded), - icon: AnimatedRotation( - turns: _isExpanded ? .25 : 0, - duration: _kAnimationDuration, - curve: _kAnimationCurve, - child: widget.expandIcon ?? const Icon(Icons.arrow_right))), + YaruRoundIconButton( + size: 32, + onTap: () => setState(() => _isExpanded = !_isExpanded), + child: AnimatedRotation( + turns: _isExpanded ? .25 : 0, + duration: _kAnimationDuration, + curve: _kAnimationCurve, + child: widget.expandIcon ?? const Icon(Icons.arrow_right), + ), + ), ], ), AnimatedCrossFade( diff --git a/lib/src/yaru_round_icon_button.dart b/lib/src/yaru_round_icon_button.dart new file mode 100644 index 000000000..9227e65d8 --- /dev/null +++ b/lib/src/yaru_round_icon_button.dart @@ -0,0 +1,46 @@ +import 'package:flutter/material.dart'; + +class YaruRoundIconButton extends StatelessWidget { + const YaruRoundIconButton({ + super.key, + this.backgroundColor, + this.onTap, + this.tooltip, + required this.child, + this.size = 40, + }); + + /// The [Color] used for the round background. + final Color? backgroundColor; + + /// Optional onTap callback to select the button + final Function()? onTap; + + /// String shown in the [Tooltip] + final String? tooltip; + + /// + final Widget child; + + final double size; + + @override + Widget build(BuildContext context) { + return Tooltip( + message: tooltip ?? '', + child: SizedBox( + height: size, + width: size, + child: Material( + color: backgroundColor, + borderRadius: BorderRadius.circular(size / 2), + child: InkWell( + borderRadius: BorderRadius.circular(size / 2), + onTap: onTap, + child: child, + ), + ), + ), + ); + } +} diff --git a/lib/src/yaru_round_toggle_button.dart b/lib/src/yaru_round_toggle_button.dart index a5f747075..4c4f6f1ca 100644 --- a/lib/src/yaru_round_toggle_button.dart +++ b/lib/src/yaru_round_toggle_button.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:yaru_widgets/src/yaru_round_icon_button.dart'; /// A selectable [IconButton], wrapped in a [CircleAvatar] class YaruRoundToggleButton extends StatelessWidget { @@ -11,7 +12,7 @@ class YaruRoundToggleButton extends StatelessWidget { /// Optional onPressed callback to select the button final Function()? onPressed; - /// Optional tooltip + /// Tooltip final String? tooltip; const YaruRoundToggleButton({ @@ -19,27 +20,23 @@ class YaruRoundToggleButton extends StatelessWidget { required this.selected, required this.iconData, this.onPressed, - this.tooltip, + required this.tooltip, }) : super(key: key); @override Widget build(BuildContext context) { - return CircleAvatar( - backgroundColor: selected - ? Theme.of(context).colorScheme.onSurface.withOpacity(0.05) - : Colors.transparent, - child: IconButton( - tooltip: tooltip, - color: selected ? Colors.grey : null, - splashRadius: 20, - onPressed: onPressed, - icon: Icon( - iconData, - color: selected - ? Theme.of(context).primaryColor - : Theme.of(context).colorScheme.onSurface.withOpacity(0.8), - ), + return YaruRoundIconButton( + onTap: onPressed, + tooltip: tooltip, + child: Icon( + iconData, + color: selected + ? Theme.of(context).primaryColor + : Theme.of(context).colorScheme.onSurface.withOpacity(0.8), ), + backgroundColor: selected + ? Theme.of(context).colorScheme.onSurface.withOpacity(0.1) + : null, ); } } diff --git a/lib/src/yaru_search_app_bar.dart b/lib/src/yaru_search_app_bar.dart index e567b4e4f..802d16446 100644 --- a/lib/src/yaru_search_app_bar.dart +++ b/lib/src/yaru_search_app_bar.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:yaru_widgets/yaru_widgets.dart'; /// Creates a search bar inside an [AppBar]. /// @@ -101,10 +102,9 @@ class YaruSearchAppBar extends StatelessWidget implements PreferredSizeWidget { BoxConstraints.expand(width: 48, height: appBarHeight), suffixIcon: Padding( padding: const EdgeInsets.only(right: 6, bottom: 3), - child: IconButton( - splashRadius: appBarHeight / 3, - onPressed: onEscape, - icon: Icon( + child: YaruRoundIconButton( + onTap: onEscape, + child: Icon( clearSearchIconData ?? Icons.close, color: textColor, ), diff --git a/lib/yaru_widgets.dart b/lib/yaru_widgets.dart index 45a0e3c68..a2e4bd8e5 100644 --- a/lib/yaru_widgets.dart +++ b/lib/yaru_widgets.dart @@ -18,6 +18,7 @@ export 'src/yaru_narrow_layout.dart'; export 'src/yaru_option_button.dart'; export 'src/yaru_page.dart'; export 'src/yaru_page_item.dart'; +export 'src/yaru_round_icon_button.dart'; export 'src/yaru_round_toggle_button.dart'; export 'src/yaru_row.dart'; export 'src/yaru_search_app_bar.dart';