Contents
Summary
基本的なマテリアルボタンウィジェットとテーマの新しいセットがFlutterに追加されました。元のクラスは非推奨になり、最終的には削除されます。全体的な目標は、ボタンをより柔軟にし、コンストラクターパラメーターまたはテーマを介して構成しやすくすることです。
(古) → (新)
FlatButton → TextButton
RaisedButton → ElevatedButton
OutlineButton → OutlinedButton
にそれぞれ置き換えられます。
それぞれのButtonClassは各自のthemeを持っています。
TextButtonTheme、ElevatedButtonTheme、 OutlinedButtonThemeです。
これまで使っていたButtonThemeクラスは使用されなくなりました。
ボタンの外観はButtonStyleオブジェクトにより指定するようになります。これまでのようなウィジェットのパラメーターとプロパティの大規模なセットの代わりに。
これは、大まかにいうと、テキストの外観をTextStyleオブジェクトで定義する方法と同じような感じと言っていいでしょう。
新しいボタンのテーマはButtonStyleオブジェクトで設定します。
ButtonStyleそれ自身は視覚的なプロパティの集まりです。
これらのプロパティの多くはMaterialStatePropertyで定義されています。つまり、これらのプロパティの値はボタンの状態に依存する可能性があります。
Context
Rather than try and evolve the existing button classes and their theme in-place, we have introduced new replacement button widgets and themes.
既存のボタンクラスとそのテーマを適切に進化させるのではなく、新しいボタンウィジェットとテーマを導入しました。
既存のクラスをインプレースで進化させることで生じる下位互換性の迷路から解放されることに加えて、新しい名前は、ボタンコンポーネントに新しい名前を使用するマテリアルデザイン仕様とFlutterを同期させます。
| Old Widget | Old Theme | New Widget | New Theme |
|---|---|---|---|
FlatButton |
ButtonTheme |
TextButton |
TextButtonTheme |
RaisedButton |
ButtonTheme |
ElevatedButton |
ElevatedButtonTheme |
OutlineButton |
ButtonTheme |
OutlinedButton |
OutlinedButtonTheme |
The new themes follow the “normalized” pattern that Flutter adopted for new Material widgets about a year ago.
新しいテーマは、Flutterが約1年前に新しいマテリアルウィジェットに採用した「normalized」パターンに従います。
Theme properties and widget constructor parameters are null by default.
Theme(テーマ)のプロパティとウィジェットコンストラクターのパラメーターは、デフォルトではnullです。
Non-null theme properties and widget parameters specify an override of the component’s default value.
null以外のテーマのプロパティとウィジェットのパラメーターは、コンポーネントのデフォルト値のオーバーライドを指定します。
Implementing and documenting default values is the sole responsibility of the button component widgets.
デフォルト値の実装と文書化は、ボタンコンポーネントウィジェットの唯一の責任です。
The defaults themselves are based primarily on the overall Theme’s colorScheme and textTheme.
デフォルト自体は、主に全体のテーマのcolorSchemeとtextThemeに基づいています。
Visually, the new buttons look a little different, because they match the current Material Design spec and because their colors are configured in terms of the overall Theme’s ColorScheme.
新しいボタンは、現在のマテリアルデザインの仕様と一致し、テーマのColorScheme全体で色が構成されているため、視覚的には(これまでのものとは)少し異なります。
There are other small differences in padding, rounded corner radii, and the hover/focus/pressed feedback.
パディング、丸みを帯びた角の半径、およびホバー/フォーカス/押されたフィードバックには他にも小さな違いがあります。
Many applications will be able to just substitute the new class names for the old ones. Apps with golden image tests or with buttons whose appearance has been configured with constructor parameters or with the original ButtonTheme may need to consult the migration guide and the introductory material that follows.
多くのアプリケーションは、古いクラス名を新しいクラス名に置き換えることができます(名前を書き換えるだけでOKということ)。
ゴールデンイメージテストを備えたアプリ、またはコンストラクターパラメーターまたはオリジナルButtonThemeを使用して外観が構成されたボタンを備えたアプリは、移行ガイドおよび以下の紹介資料を参照する必要がある場合があります。
API Change: ButtonStyle instead of individual style properties
Except for simple use cases, the APIs of the new button classes are not compatible with the old classes.
単純なユースケースを除いて、新しいボタンクラスのAPIはこれまでの古いクラスと互換性がありません。
The visual attributes of the new buttons and themes are configured with a single ButtonStyle object, similar to how a TextField or a Text widget can be configured with a TextStyle object.
新しいボタンとそのテーマの視覚的属性は、TextFieldまたはTextウィジェットをTextStyleオブジェクトで構成する方法と同様に、単一のButtonStyleオブジェクトで構成され ます。
Most of the ButtonStyle properties are defined with MaterialStateProperty, so that a single property can represent different values depending on the button’s pressed/focused/hovered/etc state.
ほとんどのプロパティはMaterialStatePropertyで定義されているため、ボタンの押された状態、フォーカスされた状態、ホバーされた状態などに応じて、1つのプロパティで異なる値を表すことができます。
A button’s ButtonStyle doesn’t define the button’s visual properties, it defines overrides of the buttons default visual properties, where the default properties are computed by the button widget itself.
ボタンのButtonStyleは、ボタンの視覚的プロパティを定義するのではなく、ボタンのデフォルトの視覚的プロパティのオーバーライドを定義します。デフォルトのプロパティは、ボタンウィジェット自体によって計算されます。
For example, to override a TextButton’s default foreground (text/icon) color for all states, one could write:
たとえばTextButtonの、全ての状態のデフォルトのforeground color（テキスト/アイコンの色）を上書きするには、次のように記述します。
「全ての状態」とは「ボタンの押された状態、フォーカスされた状態、ホバーされた状態など」の状態のこと。
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () { },
child: Text('TextButton'),
)This kind of override is common; however, in many cases what’s also needed are overrides for the overlay colors that the text button uses to indicate its hovered/focus/pressed state.
この種のオーバーライドは一般的です。ただし、多くの場合、テキストボタンがホバー/フォーカス/押された状態を示すために使用するオーバーレイカラーのオーバーライドも必要です。
This can be done by adding the overlayColor property to the ButtonStyle.
これは、overlayColorプロパティをButtonStyleに追加することで実行できます
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered))
return Colors.blue.withOpacity(0.04);
if (states.contains(MaterialState.focused) ||
states.contains(MaterialState.pressed))
return Colors.blue.withOpacity(0.12);
return null; // Defer to the widget's default.
},
),
),
onPressed: () { },
child: Text('TextButton')
)
A color MaterialStateProperty only needs to return a value for the colors whose default should be overridden. If it returns null, the widget’s default will be used instead. For example, to just override the text button’s focus overlay color:
MaterialStateProperty<Color>は、上書きしたい色を返すことが必要です。
nullを返す場合は、代わりにウィジェットのデフォルトが使用されます。たとえば、テキストボタンのフォーカスオーバーレイの色を赤色に上書きするには、次のようにします。
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.focused))
return Colors.red;
return null; // Defer to the widget's default.
}
),
),
onPressed: () { },
child: Text('TextButton'),
)
The styleFrom() ButtonStyle utility methods
The Material Design spec defines buttons’ foreground and overlay colors in terms of the color scheme’s primary color.
マテリアルデザインspecでは、color schemeのprimary colorの観点からボタンの前景色とオーバーレイの色を定義しています。
The primary color is rendered at different opacities, depending on the button’s state.
primary colorは、ボタンの状態に応じて、さまざまな不透明度でレンダリングされます。
To simplify creating a button style that includes all of the properties that depend on color scheme colors,
color schemeの色に依存する全てのプロパティを含むButtonStyleの生成を簡単にするために、
each button class includes a static styleFrom() method
それぞれのボタンクラスはstaticなメソッドであるstyleFrom()メソッドを持っています。
which constructs a ButtonStyle from a simple set of values, including the ColorScheme colors it depends on.
This example creates a button that overrides its foreground color, as well as its overlay color, using the specified primary color and the opacities from the Material Design spec.
この例では、マテリアルデザイン仕様から指定されたprimary colorとopacity(不透明度)を使用して、前景色とオーバーレイ色を上書きするボタンを作成します。
TextButton(
style: TextButton.styleFrom(
primary: Colors.blue,
),
onPressed: () { },
child: Text('TextButton'),
)The TextButton documentation indicates that the foreground color when the button is disabled is based on the color scheme’s onSurface color. To override that as well, using styleFrom():
TextButtonのドキュメントには、ボタンが無効になっている時のforeground colorはカラースキームのonSurfaceプロパティに基づいていると説明されています。これをオーバーライドする場合も、styleFrom（）メソッドを使用します。
TextButton(
style: TextButton.styleFrom(
primary: Colors.blue,
onSurface: Colors.red,
),
onPressed: null,
child: Text('TextButton'),
)Using the styleFrom() method is the preferred way to create a ButtonStyle if you’re trying to create a Material Design variation.
マテリアルデザインのバリエーションを作成しようとしている場合は、ButtonStyleを生成するためにこのstyleFrom()メソッド を使用することをお勧めします。
The most flexible approach is defining a ButtonStyle directly, with MaterialStateProperty values for the states whose appearance you want to override.
最も柔軟なアプローチは、外観をオーバーライドするMaterialStatePropertyの状態の値を使用してButtonStyle を直接定義することです。
ButtonStyle defaults
Widgets like the new button classes compute their default values based on the overall theme’s colorScheme and textTheme as well as button’s current state.
新しいボタンクラスなどのウィジェットは、そのデフォルト値を、全体のテーマのcolorSchemeとtextTheme、さらにボタンの現在の状態を元に計算します。
In a few cases they also consider if the overall theme’s color scheme is light or dark.
いくつかのケースでは、テーマ全体の配色が明るいか暗いかについても検討します。
Each button has a protected method that computes its default style as needed.
各ボタンには、必要に応じてデフォルトのスタイルを計算する保護されたメソッドがあります。
Although apps won’t call this method directly, its API doc explains what all of the defaults are.
アプリはこのメソッドを直接呼び出すことはありませんが、そのAPIドキュメントにはすべてのデフォルトが何であるかが説明されています。
When a button or button theme specifies ButtonStyle, only the button style’s non-null properties override the computed defaults.
ボタンまたはボタンテーマが ButtonStyleを指定するとき、ButtonStyleのnull以外のプロパティのみが計算されたデフォルトを上書きします。
The button’s style parameter overrides non-null properties specified by the corresponding button theme.
ボタンのstyleパラメータは、対応するボタンテーマに対して、nullでないプロパティを上書きします。
For example if foregroundColor property of a TextButton’s style is non-null, it overrides the same property for the TextButonTheme’s style.
例えばTextButtonのstyleパラメータのforegroundColorプロパティがnullでない場合、TextButtonThemeのstyleの同一プロパティが上書きされます。
As explained earlier, each button class includes a static method called styleFrom which constructs a ButtonStyle from a simple set of values, including the ColorScheme colors it depends on.
前に説明したように、各ボタンクラスには、依存するColorScheme色を含む単純な値のセットからButtonStyleを構築するstyleFromという静的メソッドが含まれています。
In many common cases, using styleFrom to create a one-off ButtonStyle that overrides the defaults, is simplest.
多くの一般的なケースでは、デフォルトをオーバーライドする1回限りのButtonStyleの作成にButtonStyleメソッドを使用するのが最も簡単です。
This is particularly true when the custom style’s objective is to override one of the color scheme colors, like primary or onPrimary that the default style depends on.
これは、カスタムスタイルの目的が、デフォルトのスタイルが依存しているような、primaryまたはonPrimaryなどのcolor schemeの色の1つをオーバーライドすることである場合に特に当てはまります。
For other cases you can create a ButtonStyle object directly.
その他の場合は、ButtonStyleオブジェクトを直接作成することもできます。
Doing so enables you to control the value of visual properties, like colors, for all of the button’s possible states – like pressed, hovered, disabled, and focused.
そうすることで、ボタンの可能なすべての状態（押された、ホバーされた、無効にされた、フォーカスされたなど）について、色などの視覚的プロパティの値を制御できます。
参考