From 4a40feb213847d00830a525efdff9e0994c67fde Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Sun, 25 Sep 2022 11:01:45 +0200 Subject: [PATCH 1/2] Replace YaruColorPickerButton with YaruOptionButton.color() --- example/lib/example_page_items.dart | 9 +- example/lib/pages/color_picker_page.dart | 23 ----- example/lib/pages/option_button_page.dart | 49 +++++++++++ example/lib/widgets/option_button_list.dart | 33 ------- .../controls/yaru_color_picker_button.dart | 46 ---------- lib/src/controls/yaru_option_button.dart | 88 +++++++++++-------- lib/yaru_widgets.dart | 1 - 7 files changed, 104 insertions(+), 145 deletions(-) delete mode 100644 example/lib/pages/color_picker_page.dart create mode 100644 example/lib/pages/option_button_page.dart delete mode 100644 example/lib/widgets/option_button_list.dart delete mode 100644 lib/src/controls/yaru_color_picker_button.dart diff --git a/example/lib/example_page_items.dart b/example/lib/example_page_items.dart index b9cd64d99..0fa6f92e2 100644 --- a/example/lib/example_page_items.dart +++ b/example/lib/example_page_items.dart @@ -5,9 +5,9 @@ import 'package:yaru_widgets_example/pages/banner_page.dart'; import 'package:yaru_widgets_example/pages/carousel_page.dart'; import 'package:yaru_widgets_example/pages/check_box_row_page.dart'; import 'package:yaru_widgets_example/pages/color_disk_page.dart'; -import 'package:yaru_widgets_example/pages/color_picker_page.dart'; import 'package:yaru_widgets_example/pages/draggable_page.dart'; import 'package:yaru_widgets_example/pages/extra_option_row_page.dart'; +import 'package:yaru_widgets_example/pages/option_button_page.dart'; import 'package:yaru_widgets_example/pages/round_toggle_button_page.dart'; import 'package:yaru_widgets_example/pages/section_page.dart'; import 'package:yaru_widgets_example/pages/selectable_container_page.dart'; @@ -15,7 +15,6 @@ import 'package:yaru_widgets_example/pages/slider_page.dart'; import 'package:yaru_widgets_example/pages/switch_row_page.dart'; import 'package:yaru_widgets_example/pages/tabbed_page_page.dart'; import 'package:yaru_widgets_example/pages/toggle_buttons_row_page.dart'; -import 'package:yaru_widgets_example/widgets/option_button_list.dart'; import 'package:yaru_widgets_example/widgets/row_list.dart'; const _lorem = @@ -72,7 +71,7 @@ final examplePageItems = [ YaruPageItem( titleBuilder: (context) => YaruPageItemTitle.text('YaruOptionButton'), iconData: YaruIcons.settings, - builder: (_) => YaruPage(children: [OptionButtonList()]), + builder: (_) => YaruPage(children: [OptionButtonPage()]), ), YaruPageItem( titleBuilder: (context) => YaruPageItemTitle.text('YaruSearchAppBar'), @@ -138,10 +137,6 @@ final examplePageItems = [ titleBuilder: (context) => YaruPageItemTitle.text('YaruTabbedPage'), builder: (_) => TabbedPagePage(), iconData: YaruIcons.tab_new), - YaruPageItem( - titleBuilder: (context) => YaruPageItemTitle.text('Color picker button'), - builder: (_) => ColorPickerPage(), - iconData: YaruIcons.color_select), YaruPageItem( titleBuilder: (context) => YaruPageItemTitle.text('YaruCarousel'), builder: (_) => CarouselPage(), diff --git a/example/lib/pages/color_picker_page.dart b/example/lib/pages/color_picker_page.dart deleted file mode 100644 index 1e5bcb89c..000000000 --- a/example/lib/pages/color_picker_page.dart +++ /dev/null @@ -1,23 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:yaru_widgets/yaru_widgets.dart'; - -class ColorPickerPage extends StatefulWidget { - const ColorPickerPage({Key? key}) : super(key: key); - - @override - _ColorPickerPageState createState() => _ColorPickerPageState(); -} - -class _ColorPickerPageState extends State { - @override - Widget build(BuildContext context) { - return YaruPage( - children: [ - Center( - child: YaruColorPickerButton( - color: Theme.of(context).primaryColor, onPressed: () {}), - ) - ], - ); - } -} diff --git a/example/lib/pages/option_button_page.dart b/example/lib/pages/option_button_page.dart new file mode 100644 index 000000000..1d2f6157e --- /dev/null +++ b/example/lib/pages/option_button_page.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_icons/yaru_icons.dart'; +import 'package:yaru_widgets/yaru_widgets.dart'; + +class OptionButtonPage extends StatefulWidget { + const OptionButtonPage({Key? key}) : super(key: key); + + @override + _OptionButtonPageState createState() => _OptionButtonPageState(); +} + +class _OptionButtonPageState extends State { + @override + Widget build(BuildContext context) { + return YaruPage( + children: [ + Row( + children: [ + YaruOptionButton( + onPressed: () {}, + child: Icon(YaruIcons.search), + ), + const SizedBox( + width: 10.0, + ), + YaruOptionButton( + onPressed: () {}, + child: Icon(YaruIcons.audio), + ), + const SizedBox( + width: 10.0, + ), + YaruOptionButton( + onPressed: () {}, + child: Icon(YaruIcons.address_book), + ), + const SizedBox( + width: 10.0, + ), + YaruOptionButton.color( + onPressed: () {}, + color: Theme.of(context).primaryColor, + ), + ], + ), + ], + ); + } +} diff --git a/example/lib/widgets/option_button_list.dart b/example/lib/widgets/option_button_list.dart deleted file mode 100644 index 681dac0be..000000000 --- a/example/lib/widgets/option_button_list.dart +++ /dev/null @@ -1,33 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:yaru_icons/yaru_icons.dart'; -import 'package:yaru_widgets/yaru_widgets.dart'; - -class OptionButtonList extends StatelessWidget { - const OptionButtonList({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return Row( - children: [ - YaruOptionButton( - onPressed: () {}, - child: Icon(YaruIcons.search), - ), - const SizedBox( - width: 10.0, - ), - YaruOptionButton( - onPressed: () {}, - child: Icon(YaruIcons.audio), - ), - const SizedBox( - width: 10.0, - ), - YaruOptionButton( - onPressed: () {}, - child: Icon(YaruIcons.address_book), - ), - ], - ); - } -} diff --git a/lib/src/controls/yaru_color_picker_button.dart b/lib/src/controls/yaru_color_picker_button.dart deleted file mode 100644 index e0eabc597..000000000 --- a/lib/src/controls/yaru_color_picker_button.dart +++ /dev/null @@ -1,46 +0,0 @@ -import 'package:flutter/material.dart'; - -/// A squared [OutlinedButton] with a colorable disk inside and a [VoidCallback] forwarded to [onPressed] -class YaruColorPickerButton extends StatelessWidget { - const YaruColorPickerButton({ - super.key, - this.enabled = true, - required this.color, - required this.onPressed, - this.size = 40.0, - }); - - /// Whether or not we can interact with the button - final bool enabled; - - /// Is executed when pressing the button. - final VoidCallback onPressed; - - /// Colors the colored disk. - final Color color; - - /// Can be changed but defaults to 40.0 - final double size; - - @override - Widget build(BuildContext context) { - return SizedBox( - width: size, - height: size, - child: OutlinedButton( - style: OutlinedButton.styleFrom(padding: const EdgeInsets.all(0)), - onPressed: enabled ? onPressed : null, - child: SizedBox( - width: size / 2, - height: size / 2, - child: DecoratedBox( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(100), - color: color, - ), - ), - ), - ), - ); - } -} diff --git a/lib/src/controls/yaru_option_button.dart b/lib/src/controls/yaru_option_button.dart index 932afe929..d6d188c4c 100644 --- a/lib/src/controls/yaru_option_button.dart +++ b/lib/src/controls/yaru_option_button.dart @@ -1,43 +1,61 @@ import 'package:flutter/material.dart'; -class YaruOptionButton extends StatelessWidget { - /// Creates an [OutlinedButton] with Yaru theme. - /// The button have `height` and `width` of 40. - /// - /// for example: - /// ```dart - /// YaruOptionButton( - /// onPressed: () {}, - /// icon: Icon(YaruIcons.search), - /// ), - /// ``` - const YaruOptionButton({ +/// An [OutlinedButton] with a default size of 40x40. +/// +/// For example, an option button with an arbitrary child widget: +/// ```dart +/// YaruOptionButton( +/// onPressed: () {}, +/// child: Icon(YaruIcons.search), +/// ), +/// ``` +/// +/// Or with a pre-made color disk: +/// ```dart +/// YaruOptionButton.color( +/// onPressed: () {}, +/// color: Theme.of(context).primaryColor, +/// ), +/// ``` +class YaruOptionButton extends OutlinedButton { + /// Creates a [YaruOptionButton]. + YaruOptionButton({ super.key, - required this.onPressed, - required this.child, - }); + required super.onPressed, + super.focusNode, + super.autofocus = false, + ButtonStyle? style, + required Widget child, + }) : super( + style: _styleFrom(padding: EdgeInsets.zero).merge(style), + child: IconTheme.merge( + data: const IconThemeData(size: 24), + child: child, + ), + ); - /// Callback that gets invoked when the button is clicked. - final VoidCallback? onPressed; - - /// The [Widget] is placed as a child of [OutlinedButton]. - final Widget child; + /// Creates a [YaruOptionButton] with a color disk. + YaruOptionButton.color({ + super.key, + required super.onPressed, + super.focusNode, + super.autofocus = false, + ButtonStyle? style, + required Color color, + }) : super( + style: _styleFrom(padding: const EdgeInsets.all(10)).merge(style), + child: SizedBox.expand( + child: DecoratedBox( + decoration: BoxDecoration(color: color, shape: BoxShape.circle), + ), + ), + ); - @override - Widget build(BuildContext context) { - return OutlinedButton( - style: OutlinedButton.styleFrom( - minimumSize: const Size(40, 40), - maximumSize: const Size(40, 40), - padding: const EdgeInsets.all(0), - ), - onPressed: onPressed, - child: IconTheme.merge( - data: const IconThemeData( - size: 24, - ), - child: child, - ), + static ButtonStyle _styleFrom({EdgeInsets? padding}) { + return OutlinedButton.styleFrom( + minimumSize: const Size.square(40), + maximumSize: const Size.square(40), + padding: padding, ); } } diff --git a/lib/yaru_widgets.dart b/lib/yaru_widgets.dart index 2f1aa1bfc..87b141cc8 100644 --- a/lib/yaru_widgets.dart +++ b/lib/yaru_widgets.dart @@ -2,7 +2,6 @@ library yaru_widgets; // Controls export 'src/controls/yaru_color_disk.dart'; -export 'src/controls/yaru_color_picker_button.dart'; export 'src/controls/yaru_icon_button.dart'; export 'src/controls/yaru_option_button.dart'; export 'src/controls/yaru_progress_indicator.dart'; From c8133135af99ba4298d2f27053fa5df64e6a0420 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Sun, 25 Sep 2022 11:25:05 +0200 Subject: [PATCH 2/2] Update option button tests --- test/controls/yaru_options_button_test.dart | 31 +++++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/test/controls/yaru_options_button_test.dart b/test/controls/yaru_options_button_test.dart index b3493c813..8e985f56f 100644 --- a/test/controls/yaru_options_button_test.dart +++ b/test/controls/yaru_options_button_test.dart @@ -3,7 +3,7 @@ import 'package:flutter_test/flutter_test.dart'; import 'package:yaru_widgets/src/controls/yaru_option_button.dart'; void main() { - testWidgets('YaruOptionsButton Test', (WidgetTester tester) async { + testWidgets('with icon', (WidgetTester tester) async { await tester.pumpWidget( MaterialApp( home: Scaffold( @@ -15,7 +15,32 @@ void main() { ), ); - expect(find.byType(OutlinedButton), findsOneWidget); - expect(find.byType(Icon), findsOneWidget); + expect( + find.widgetWithIcon(YaruOptionButton, Icons.flutter_dash), + findsOneWidget, + ); + }); + + testWidgets('with color disk', (WidgetTester tester) async { + await tester.pumpWidget( + MaterialApp( + home: Scaffold( + body: YaruOptionButton.color( + onPressed: () {}, + color: Colors.red, + ), + ), + ), + ); + + final box = find.descendant( + of: find.byType(YaruOptionButton), + matching: find.byType(DecoratedBox), + ); + expect(box, findsOneWidget); + expect( + tester.widget(box).decoration, + isA().having((d) => d.color, 'color', Colors.red), + ); }); }