From 76cadf0061c9cebf2528d9f8cf4ca8dfbd56162a Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Thu, 9 Jan 2025 22:00:06 +0900 Subject: [PATCH 1/5] fix: add spaces within column --- lib/panache.dart | 83 +++++++++++++++++++++++++----------------------- 1 file changed, 44 insertions(+), 39 deletions(-) diff --git a/lib/panache.dart b/lib/panache.dart index 1b8e97a..295a634 100644 --- a/lib/panache.dart +++ b/lib/panache.dart @@ -41,49 +41,54 @@ class Panache extends HookWidget { }, ), ), - FilledButton( - onPressed: () { - selectedUnit.value = Unit.paragraphs; - }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), + Column( + spacing: 16.0, + children: [ + FilledButton( + onPressed: () { + selectedUnit.value = Unit.paragraphs; + }, + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + ), + child: Text(Unit.paragraphs.text), ), - ), - child: Text(Unit.paragraphs.text), - ), - FilledButton( - onPressed: () { - selectedUnit.value = Unit.sentences; - }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), + FilledButton( + onPressed: () { + selectedUnit.value = Unit.sentences; + }, + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + ), + child: Text(Unit.sentences.text), ), - ), - child: Text(Unit.sentences.text), - ), - FilledButton( - onPressed: () { - selectedUnit.value = Unit.words; - }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), + FilledButton( + onPressed: () { + selectedUnit.value = Unit.words; + }, + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + ), + child: Text(Unit.words.text), ), - ), - child: Text(Unit.words.text), - ), - FilledButton( - onPressed: () { - selectedUnit.value = Unit.bytes; - }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), + FilledButton( + onPressed: () { + selectedUnit.value = Unit.bytes; + }, + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + ), + child: Text(Unit.bytes.text), ), - ), - child: Text(Unit.bytes.text), + ], ), ], ), From ff3a3013aef65ec48d4fd87a8cc9691feab2fab0 Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Fri, 10 Jan 2025 14:59:56 +0900 Subject: [PATCH 2/5] refactor: add unit button component --- lib/panache.dart | 37 +++++++------------------- lib/src/ui/components/unit_button.dart | 22 +++++++++++++++ 2 files changed, 31 insertions(+), 28 deletions(-) create mode 100644 lib/src/ui/components/unit_button.dart diff --git a/lib/panache.dart b/lib/panache.dart index 295a634..ec6af9d 100644 --- a/lib/panache.dart +++ b/lib/panache.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:panache/src/model/unit.dart'; +import 'package:panache/src/ui/components/unit_button.dart'; import 'package:syncfusion_flutter_sliders/sliders.dart'; class Panache extends HookWidget { @@ -44,49 +45,29 @@ class Panache extends HookWidget { Column( spacing: 16.0, children: [ - FilledButton( + UnitButton( + unit: Unit.paragraphs, onPressed: () { selectedUnit.value = Unit.paragraphs; }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - ), - child: Text(Unit.paragraphs.text), ), - FilledButton( + UnitButton( + unit: Unit.sentences, onPressed: () { selectedUnit.value = Unit.sentences; }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - ), - child: Text(Unit.sentences.text), ), - FilledButton( + UnitButton( + unit: Unit.words, onPressed: () { selectedUnit.value = Unit.words; }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - ), - child: Text(Unit.words.text), ), - FilledButton( + UnitButton( + unit: Unit.bytes, onPressed: () { selectedUnit.value = Unit.bytes; }, - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - ), - child: Text(Unit.bytes.text), ), ], ), diff --git a/lib/src/ui/components/unit_button.dart b/lib/src/ui/components/unit_button.dart new file mode 100644 index 0000000..86c9cf2 --- /dev/null +++ b/lib/src/ui/components/unit_button.dart @@ -0,0 +1,22 @@ +import 'package:flutter/material.dart'; +import 'package:panache/src/model/unit.dart'; + +class UnitButton extends StatelessWidget { + const UnitButton({super.key, required this.unit, required this.onPressed}); + + final Unit unit; + final VoidCallback onPressed; + + @override + Widget build(BuildContext context) { + return ElevatedButton( + onPressed: onPressed, + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(22), + ), + ), + child: Text(unit.text), + ); + } +} From e639ec7105516ccee6bed82572a03b364e8603c9 Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Fri, 10 Jan 2025 15:03:42 +0900 Subject: [PATCH 3/5] feat: display focused ring --- lib/src/ui/components/unit_button.dart | 37 ++++++++++++++++++++------ 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/lib/src/ui/components/unit_button.dart b/lib/src/ui/components/unit_button.dart index 86c9cf2..384ae5b 100644 --- a/lib/src/ui/components/unit_button.dart +++ b/lib/src/ui/components/unit_button.dart @@ -1,22 +1,43 @@ import 'package:flutter/material.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:panache/src/model/unit.dart'; -class UnitButton extends StatelessWidget { - const UnitButton({super.key, required this.unit, required this.onPressed}); +class UnitButton extends HookWidget { + const UnitButton({ + super.key, + required this.unit, + required this.onPressed, + }); final Unit unit; final VoidCallback onPressed; @override Widget build(BuildContext context) { - return ElevatedButton( - onPressed: onPressed, - style: ElevatedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(22), + final focusNode = useFocusNode(); + + return Container( + decoration: focusNode.hasFocus + ? ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide(width: 4, color: Colors.indigo), + borderRadius: BorderRadius.circular(25), + ), + ) + : null, + child: ElevatedButton( + focusNode: focusNode, + onPressed: () { + onPressed(); + focusNode.requestFocus(); + }, + style: ElevatedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(22), + ), ), + child: Text(unit.text), ), - child: Text(unit.text), ); } } From 675557fb9837358823a5f52393ebb6b3899c4c1b Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Fri, 10 Jan 2025 16:12:21 +0900 Subject: [PATCH 4/5] feat: enable to move focus among buttons --- lib/panache.dart | 59 ++++++++++++++------------ lib/src/ui/components/unit_button.dart | 15 ++++++- 2 files changed, 45 insertions(+), 29 deletions(-) diff --git a/lib/panache.dart b/lib/panache.dart index ec6af9d..6298159 100644 --- a/lib/panache.dart +++ b/lib/panache.dart @@ -42,34 +42,37 @@ class Panache extends HookWidget { }, ), ), - Column( - spacing: 16.0, - children: [ - UnitButton( - unit: Unit.paragraphs, - onPressed: () { - selectedUnit.value = Unit.paragraphs; - }, - ), - UnitButton( - unit: Unit.sentences, - onPressed: () { - selectedUnit.value = Unit.sentences; - }, - ), - UnitButton( - unit: Unit.words, - onPressed: () { - selectedUnit.value = Unit.words; - }, - ), - UnitButton( - unit: Unit.bytes, - onPressed: () { - selectedUnit.value = Unit.bytes; - }, - ), - ], + FocusTraversalGroup( + policy: WidgetOrderTraversalPolicy(), + child: Column( + spacing: 16.0, + children: [ + UnitButton( + unit: Unit.paragraphs, + onPressed: () { + selectedUnit.value = Unit.paragraphs; + }, + ), + UnitButton( + unit: Unit.sentences, + onPressed: () { + selectedUnit.value = Unit.sentences; + }, + ), + UnitButton( + unit: Unit.words, + onPressed: () { + selectedUnit.value = Unit.words; + }, + ), + UnitButton( + unit: Unit.bytes, + onPressed: () { + selectedUnit.value = Unit.bytes; + }, + ), + ], + ), ), ], ), diff --git a/lib/src/ui/components/unit_button.dart b/lib/src/ui/components/unit_button.dart index 384ae5b..027743c 100644 --- a/lib/src/ui/components/unit_button.dart +++ b/lib/src/ui/components/unit_button.dart @@ -15,9 +15,22 @@ class UnitButton extends HookWidget { @override Widget build(BuildContext context) { final focusNode = useFocusNode(); + final isFocused = useState(false); + + useEffect(() { + focusNode.addListener(() { + if (focusNode.hasFocus) { + focusNode.requestFocus(); + } + + isFocused.value = focusNode.hasFocus; + }); + + return; + }, []); return Container( - decoration: focusNode.hasFocus + decoration: isFocused.value ? ShapeDecoration( shape: RoundedRectangleBorder( side: BorderSide(width: 4, color: Colors.indigo), From dad847372d23a824462b68e7a22e13e3ed6d2e79 Mon Sep 17 00:00:00 2001 From: ume-kun1015 Date: Fri, 10 Jan 2025 16:17:50 +0900 Subject: [PATCH 5/5] fix: fix border radius --- lib/src/ui/components/unit_button.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/ui/components/unit_button.dart b/lib/src/ui/components/unit_button.dart index 027743c..9ef42a9 100644 --- a/lib/src/ui/components/unit_button.dart +++ b/lib/src/ui/components/unit_button.dart @@ -46,7 +46,7 @@ class UnitButton extends HookWidget { }, style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(22), + borderRadius: BorderRadius.circular(25), ), ), child: Text(unit.text),