FocusableActionDetectorの訳

Material buttons are great but we know they’re not always right for your app so you write your own.

マテリアルボタンは素晴らしいものですが、必ずしもあなたのアプリに適しているとは限らないので、自分で書くことになります。

Sadly writing your own controls from scratch can be a lot of work.

悲しいかな、自分で一から制御を書くのは大変な作業です。

Desktop users expect hover highlights, focus and keyboard shortcuts which is tricky to get right.

デスクトップユーザーは、ホバーハイライト、フォーカス、キーボードショートカットを期待していますが、これを正しく実現するのは容易ではありません。

It goes something like this. You create a custom button in your app thanks to GestureDetector, the button does things when you click it.

こんな感じです。 GestureDetectorのおかげで、アプリにカスタムボタンを作成できます。ボタンをクリックすると、showDashメソッドが実行されます。

You add in the appropriate variables and functions to store manipulate states such as onHovered and onfocus.

適切な変数と関数を追加して、onHoveredやonfocusなどの操作状態を保存します。

Throw in some conditional styling for the button, give the button a mouse region, wrap in a focus widget, then an actions widget and finally a shortcut switch it.

ボタンに条件付きのスタイルを設定し、ボタンにMouseRegionを指定し、Focusウィジェットでラップし、次にActionsウィジェット、最後にShorcutsで切り替えます。

Not to mention nesting order matters for three of the four widgets, so if you actually put Focus on top nothing works.

4つのウィジェットのうち3つではネストの順序が重要であることは言うまでもありません。したがって、実際にFocusウィジェットを上に置くと何も機能しなくなります。

It’s now at least four widgets deep not including the GestureDetector.

これで、GestureDetectorを除いて少なくとも4段階ネストが深くなりました。

So before you write all this boilerplate check out FocusableActionDetector,

したがって、この長いコードをすべて作成する前に、FocusableActionDetectorを確認してください。

これは、Actions、Shortcuts、Focus、MouseRegionのすべての機能を1つのウィジェットにまとめたものです。

Instead of nesting all four widgets, replace it entirely with FocusableActionDetector.

4つのウィジェットすべてをネストする代わりに、完全にFocusableActionDetectorに置き換えます。

Give the FocusableActionDetector the same information that you passed to the previous widgets.

4つのウィジェットの時の情報と同じ情報をFocusableActionDetectorに渡します。

The map of shortcuts, map of actions, a callback for focus changes, and finally a callback for hover changes.

ショートカットのマップ、アクションのマップ、フォーカス変更のコールバック、そして最後にホバー変更のコールバック。

There you have it, a focusable button with hover effects and keyboard shortcuts.

これで、ホバー効果とキーボードショートカットを備えたフォーカス可能なボタンができました。

All the functionality you want without having to make sure that you’re manually nesting four different widgets together in the right order.

4つの異なるウィジェットを確実に正しい順序で手動でネストしなくても、必要なすべての機能を得ることができました。

参考