Flutter

[Flutter] TextButton, ElevatedButton, OutlinedButtonの使い分け

Flutter 1.22から、TextButton, ElevatedButton, OutlinedButtonというボタンが導入されましたが、それぞれどのような場面で使ったらいいのか、使い分けたらいいのか調べてみました。

TextButton

TextButtonは、公式の説明によれば

Use text buttons on toolbars, in dialogs, or inline with other content but offset from that content with padding so that the button's presence is obvious. Text buttons do not have visible borders and must therefore rely on their position relative to other content for context. In dialogs and cards, they should be grouped together in one of the bottom corners. Avoid using text buttons where they would blend in with other content, for example in the middle of lists.

です。日本語に訳しますと、

テキストボタンはツールバー、ダイアログ、または他のコンテンツとインラインで使用し、ボタンの存在が明らかになるようにパディングでそのコンテンツからオフセットしてください。テキストボタンには可視的な境界線がないため、他のコンテンツとの相対的な位置関係によってコンテキストを決定する必要があります。ダイアログやカードでは、ボタンは下部の隅にまとめて配置する必要があります。リストの真ん中など、他のコンテンツと混ざってしまうような場所での使用は避けてください。

となります。他のボタンとは異なり、色々な箇所で使われる前提のボタンのようです。ボタンの配置場所や他のオブジェクトとの距離などもある程度確保しておく必要がありそうです。

ElevatedButton

ElevatedButtonは、公式の説明によれば、

Use elevated buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using elevated buttons on already-elevated content such as dialogs or cards.

です。日本語に訳すと

フラットなレイアウトに立体感を与えるためにElevatedButtonを使います。例:長くて忙しいコンテンツ内のリスト、広大な空白。

ダイアログやカードのような既に立体感のあるところにElevatedButtonを使うのは避ける。

です。

のんべんだらりとしたコンテンツの中に、ちょっと目立たせたいところでElevatedButtonを使うのが良いようです。

OutlinedButton

OutlinedButtonは、公式の説明によれば、

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app.

です。日本語に訳しますと、

OutlinedButtonは中位に強調されたボタンです。重要で、しかしアプリの中で主たるアクションではないアクションを含みます。

とのことです。なので、ElevatedButtonはその画面の主たるアクションに割り付け、二次的に重要なアクションはOutlinedButtonに割り当てるのが良さそうです。

 

-Flutter

© 2022 かずのアプリときどきキャンプ飯 Powered by AFFINGER5