2021/4/25 : Flutter : New Buttons and Button Themesの訳パート2

Contents

Migration guide

Use the following information to migrate your buttons to the new API.

次の情報を使用して、ボタンを新しいAPIに移行します。

Restoring the original button visuals

元のボタンのビジュアルを復元する

In many cases it’s possible to just switch from the old button class to the new one. That’s assuming that the small changes in size/shape and the likely bigger change in colors, aren’t a concern.

多くの場合、古いボタンクラスから新しいボタンクラスに切り替えることができます。これは、サイズ/形状の小さな変化や色の大きな変化が関係ないケースです。

To preserve the original buttons’ appearance in these cases, one can define button styles that match the original as closely as you like.

このような場合に元のボタンの外観を維持するために、元のボタンにできるだけ一致するボタンスタイルを定義できます。

For example, the following style make a TextButton look like a default FlatButton:

例えば、デフォルトのFlatButtonのような外観にしたい場合下記のようなスタイルをTextButtonに生成します。

final ButtonStyle flatButtonStyle = TextButton.styleFrom(
  primary: Colors.black87,
  minimumSize: Size(88, 36),
  padding: EdgeInsets.symmetric(horizontal: 16.0),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(2.0)),
  ),
);

TextButton(
  style: flatButtonStyle,
  onPressed: () { },
  child: Text('Looks like a FlatButton'),
)

Similarly, to make an ElevatedButton look like a default RaisedButton:

同様にElevatedButtonをデフォルトのRaisedButtonのように見せたい場合は、下記のように書いてください。

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
  onPrimary: Colors.black87,
  primary: Colors.grey[300],
  minimumSize: Size(88, 36),
  padding: EdgeInsets.symmetric(horizontal: 16),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(2)),
  ),
);
ElevatedButton(
  style: raisedButtonStyle,
  onPressed: () { },
  child: Text('Looks like a RaisedButton'),
)

//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {

  final ButtonStyle flatButtonStyle = TextButton.styleFrom(
    backgroundColor: Colors.pinkAccent[100],
    primary: Colors.black87,
    minimumSize: Size(88, 36),
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(2.0)),
    ),
  );

  final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
    onPrimary: Colors.black87,
    primary: Colors.grey[300],
    minimumSize: Size(88, 36),
    padding: EdgeInsets.symmetric(horizontal: 16),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(2)),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
      body:Column(
        children:[
          ElevatedButton(
            onPressed: () { },
            child: Text('default ElevatedButton'),
          ),

          ElevatedButton(
            style: raisedButtonStyle,
            onPressed: () { },
            child: Text('Elevated(Looks like a RaisedButton)'),
          ),

          RaisedButton(
            child:Text('default Raised'),
            onPressed:(){},
          ),



          /*
          TextButton(

            onPressed: () { },
            child: Text('This is a defalut TextButton'),
          ),
          TextButton(

            style: flatButtonStyle,
            onPressed: () { },
            child: Text('Looks like a FlatButton'),
          ),
          FlatButton(
            color:Colors.pinkAccent[100],
            child:Text('This is a FlatButton'),
            onPressed:(){},
          ),
           */
        ],
      ),
    );
  }
}

The OutlineButton style for OutlinedButton is a little more complicated because the outline’s color changes to the primary color when the button is pressed.

ボタンを押すとアウトラインの色がprimary colorに変わるため、OutlinedButtonをOutlineButtonスタイルに見せるのはもう少し複雑です。

The outline’s appearance is defined by a BorderSide and you’ll use a MaterialStateProperty to define the pressed outline color:

アウトラインの外観はBorderSideで定義され、 MaterialStatePropertyを使用して押されたアウトラインの色を定義します。

final ButtonStyle outlineButtonStyle = OutlinedButton.styleFrom(
  primary: Colors.black87,
  minimumSize: Size(88, 36),
  padding: EdgeInsets.symmetric(horizontal: 16),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(2)),
  ),
).copyWith(
  side: MaterialStateProperty.resolveWith<BorderSide>(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.pressed))
        return BorderSide(
          color: Theme.of(context).colorScheme.primary,
          width: 1,
        );
      return null; // Defer to the widget's default.
    },
  ),
);

OutlinedButton(
  style: outlineButtonStyle,
  onPressed: () { },
  child: Text('Looks like an OutlineButton'),
)

To restore the default appearance for buttons throughout an application, you can configure the new button themes in the application’s theme:

アプリケーション全体でボタンのデフォルトの外観を復元するには、アプリケーション全体のtheme(テーマ)で新しいボタンテーマを構成します↓。

MaterialApp(
  theme: ThemeData.from(colorScheme: ColorScheme.light()).copyWith(
    textButtonTheme: TextButtonThemeData(style: flatButtonStyle),
    elevatedButtonTheme: ElevatedButtonThemeData(style: raisedButtonStyle),
    outlinedButtonTheme: OutlinedButtonThemeData(style: outlineButtonStyle),
  ),
)

To restore the default appearance for buttons in part of an application you can wrap a widget subtree with TextButtonTheme, ElevatedButtonTheme, or OutlinedButtonTheme. For example:

アプリケーションの一部でボタンのデフォルトの外観を復元するには、ウィジェットのサブツリーをTextButtonTheme、 ElevatedButtonThemeまたはOutlinedButtonThemeでラップすることができます。例えば：

TextButtonTheme(
  data: TextButtonThemeData(style: flatButtonStyle),
  child: myWidgetSubtree,
)

Migrating buttons with custom colors

The following sections cover use of the following FlatButton, RaisedButton, and OutlineButton color parameters:

このセクションはFlatButton, RaisedButton, そして OutlineButtonの以下のcolorパラメータの使い方を見ていきます。

textColor
disabledTextColor
color
disabledColor
focusColor
hoverColor
highlightColor*
splashColor

The new button classes do not support a separate highlight color because it’s no longer part of the Material Design.

新しいボタンクラスは、マテリアルデザインの一部ではなくなったため、個別のハイライトカラーをサポートしていません。

Migrating buttons with custom foreground and background colors

Two common customizations for the original button classes are a custom foreground color for FlatButton, or custom foreground and background colors for RaisedButton. Producing the same result with the new button classes is simple:

オリジナルのボタンクラスの一般的なカスタマイズとして、

FlatButtonのforeground colorのカスタマイズ

RaisedButtonのforeground colorとbackground colorのカスタマイズ

が挙げられます。新しいボタンで既存のものと同じものを作る方法はシンプルです。

FlatButton(
  textColor: Colors.red, // foreground
  onPressed: () { },
  child: Text('FlatButton with custom foreground/background'),
)

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red, // foreground
  ),
  onPressed: () { },
  child: Text('TextButton with custom foreground'),
)

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
      body: Column(
        children: [
          FlatButton(
            textColor: Colors.red, // foreground
            onPressed: () { },
            child: Text('FlatButton with custom foreground/background'),
          ),

          TextButton(
            style: TextButton.styleFrom(
              primary: Colors.red, // foreground
            ),
            onPressed: () { },
            child: Text('TextButton with custom foreground'),
          ),
        ],
      ),
    );
  }
}

In this case the TextButton’s foreground (text/icon) color as well as its hovered/focused/pressed overlay colors will be based on Colors.red. By default, the TextButton’s background fill color is transparent.

この場合、TextButtonの前景色（テキスト/アイコン）の色と、ホバー/フォーカス/押されたオーバーレイの色はColors.redに基づいて決定されます。デフォルトでは、TextButtonの背景の塗りつぶしの色は透明です。

Migrating a RaisedButton with custom foreground and background colors:

カスタムの前景色と背景色を使用したRaisedButtonの移行：

RaisedButton(
  color: Colors.red, // background
  textColor: Colors.white, // foreground
  onPressed: () { },
  child: Text('RaisedButton with custom foreground/background'),
)

	ElevatedButton(
	  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.white, // foreground
  ),
  onPressed: () { },
  child: Text('ElevatedButton with custom foreground/background'),
)

//main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
      body: Column(
        children: [
          RaisedButton(
            color: Colors.red, // background
            textColor: Colors.white, // foreground
            onPressed: () { },
            child: Text('RaisedButton with custom foreground/background'),
          ),

          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.red, // background
              onPrimary: Colors.white, // foreground
            ),
            onPressed: () { },
            child: Text('ElevatedButton with custom foreground/background'),
          )


          /*
          FlatButton(
            textColor: Colors.red, // foreground
            onPressed: () { },
            child: Text('FlatButton with custom foreground/background'),
          ),

          TextButton(
            style: TextButton.styleFrom(
              primary: Colors.red, // foreground
            ),
            onPressed: () { },
            child: Text('TextButton with custom foreground'),
          ),

           */
        ],
      ),
    );
  }
}

In this case the button’s use of the color scheme’s primary color is reversed relative to the TextButton: primary is button’s background fill color and onPrimary is the foreground (text/icon) color.

ElevatedButtonのstyleFormメソッドのprimaryプロパティにセットされたColors.redは、ボタンの背景色として使われ、onPrimaryプロパティにセットされたColors.whiteはボタンの文字色として使われています。

Migrating buttons with custom overlay colors

Overriding a button’s default focused, hovered, highlighted, or splash colors is less common.

ボタンのデフォルトのフォーカス、ホバー、ハイライト、またはスプラッシュの色を上書きすることはあまり一般的ではありません。

The FlatButton, RaisedButton, and OutlineButton classes have individual parameters for these state-dependent colors.

FlatButton、RaisedButton、およびOutlineButton クラスは、これらの状態に依存する色の個々のパラメータを持っています。

The new TextButton, ElevatedButton, and OutlinedButton classes use a single MaterialStateProperty<Color> parameter instead.

新しいTextButton、ElevatedButtonおよびOutlinedButtonクラスは、個々のパラメータの代わりに、単一のMaterialStateProperty<Color>パラメータを使用します。

The new buttons allow one to specify state-dependent values for all of the colors, the original buttons only supported specifying what’s now called the “overlayColor”.

工事中🏗

FlatButton(
  focusColor: Colors.red,
  hoverColor: Colors.green,
  splashColor: Colors.blue,
  onPressed: () { },
  child: Text('FlatButton with custom overlay colors'),
)

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.focused))
          return Colors.red;
        if (states.contains(MaterialState.hovered))
            return Colors.green;
        if (states.contains(MaterialState.pressed))
            return Colors.blue;
        return null; // Defer to the widget's default.
    }),
  ),
  onPressed: () { },
  child: Text('TextButton with custom overlay colors'),
)

The new version is more flexible although less compact.

新しいバージョンは、コンパクトではありませんが、より柔軟性があります。

In the original version, the the precedence of the different states is implicit (and undocumented) and fixed, in the new version, it’s explicit.

元のバージョンでは、さまざまな状態の優先順位が暗黙的（および文書化されていない）で固定されますが、新しいバージョンでは明示的です。

For an app that specified these colors frequently, the easiest migration path would be to define one or more ButtonStyles that match the example above – and just use the style parameter – or to define a stateless wrapper widget that encapsulated the three color parameters.

これらの色を頻繁に指定する必要があるアプリで、もっとも簡単なマイグレーション方法としては、上記の例に一致するようなButtonStyleをいくつか定義しておいて、それをstyleパラメータにセットする、あるいは、三つのカラーパラメータを持つカプセル化用のストートレスなラッパーウィジェットを定義するかです。

Migrating buttons with custom disabled colors

工事中🏗

Migrating buttons with custom elevations

工事中🏗

Migrating buttons with custom shapes and borders

The original FlatButton, RaisedButton, and OutlineButton classes all provide a shape parameter which defines both the button’s shape and the appearance of its outline.

オリジナル(これまで)のFlatButton、RaisedButton、およびOutlineButtonクラスは全て、ボタンの形状(shape)とその輪郭線の外観(outline)の両方を定義するshapeパラメータを提供していました。

The corresponding new classes and their themes support specifying the button’s shape and its border separately,

対応する新しいクラスとそのテーマは、ボタンの形状と境界線を個別に指定することをサポートしています。

OutlinedBorder型の shapeパラメータ

と、

BorderSide型の sideパラメータ

によって指定します。

In this example the original OutlineButton version specifies the same color for border in its highlighted (pressed) state as for other states.

この例では、元のOutlineButtonバージョンでは、強調表示された（押された）状態の境界線に他の状態と同じ色が指定されています。

Most of the new OutlinedButton widget’s style parameters, including its shape and border, can be specified with MaterialStateProperty values, which is to say that they can have different values depending on the button’s state.

形状や境界線など、新しいOutlinedButtonウィジェットのスタイルパラメータのほとんどは、MaterialStateProperty 値で指定できます。つまり、ボタンの状態に応じて異なる値を持つことができます。

To specify a different border color when the button is pressed, do the following:

ボタンが押されたときに別の境界線の色を指定するには、次の手順を実行します。

OutlineButton(
  shape: StadiumBorder(),
  highlightedBorderColor: Colors.blue,
  borderSide: BorderSide(
    width: 2,
    color: Colors.red
  ),
  onPressed: () { },
  child: Text('OutlineButton with custom shape and border'),
)

OutlinedButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all<OutlinedBorder>(StadiumBorder()),
    side: MaterialStateProperty.resolveWith<BorderSide>(
      (Set<MaterialState> states) {
        final Color color = states.contains(MaterialState.pressed)
          ? Colors.blue
          : Colors.red;
        return BorderSide(color: color, width: 2);
      }
    ),
  ),
  onPressed: () { },
  child: Text('OutlinedButton with custom shape and border'),
)

References

API documentation:

Relevant PRs:

参考

https://flutter.dev/docs/release/breaking-changes/buttons

Migration guide

Restoring the original button visuals

元のボタンのビジュアルを復元する

Migrating buttons with custom colors

Migrating buttons with custom foreground and background colors

Migrating buttons with custom overlay colors

Migrating buttons with custom disabled colors

Migrating buttons with custom elevations

Migrating buttons with custom shapes and borders

References

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル