【Flutter】 RaisedButtonをElevatedButtonへ移行（１）

自社アプリで、RaisedButtonとFlatButtonを使用していましたが、これらのウィジェットは廃止されて、それぞれElevatedButtonとTextButtonに移行しました。本記事では、国旗マスターを例にして、更新手順をまとめておきたいと思います。※自社アプリでは使っていませんが、この他にOutlineButtonがOutlinedButtonに移行しています。

トップページにあるボタンはRaisedButtonを使用しています。コードは以下の通りです。

RaisedButton(
    onPressed: callback,
    padding: EdgeInsets.symmetric(vertical: 16.0),
    shape:
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    color: Colors.orange,
    child: Text(
        buttonTitle,
        style: buttonTextStyle,
    ),
),

上記で使われているプロパティの中で、ElevatedButtonでもサポートされているのは、以下の2つです。

onPressed
child

ElevatedButtonのドキュメンテーションに記載がないのは、以下の3つで、すべてstyleプロパティに吸収された形になっているようです。

shape
color
padding

まずRaisedButtonをElevatedButtonに変更して、サポートされていないプロパティをコメントアウトして、どのように表示されるか確認します。

ElevatedButton(
    onPressed: callback,
    // padding: EdgeInsets.symmetric(vertical: 16.0),
    // shape:
    //     RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    // color: Colors.orange,
    child: Text(
        buttonTitle,
        style: buttonTextStyle,
    ),
),

青色の少し小さめのボタンとして表示されます。これが新しいデフォルトになるようです。※ボタンの幅は親ウィジェットの影響で広くなっています。

それでは、一つずつプロパティを反映してもとのデザインを適用してきます。

color

スタイル関連のプロパティはまとめてstyleプロパティにElevatedButton.styleFromを使って設定する方法が移行ガイドに記載されているので、ここではその方法を採用したいと思います。もとのcolorプロパティで使っていた色であるcolors.orangeをElevatedButton.styleFromのprimaryプロパティに適用します。ホットリロードするとボタンの色が変わります。

padding

paddingプロパティも同様にElevatedButton.styleFromのpaddingプロパティに同じ値であるEdgeInsets.symmetric(vertical: 16.0)を適用します。

shape

最後にshapeプロパティもElevatedButton.styleFromのshapeプロパティに同じ値であるRoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))を適用します。

結果、以下のようなコードになります。

ElevatedButton(
    onPressed: callback,
    // padding: EdgeInsets.symmetric(vertical: 16.0),
    // shape:
    //     RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    // color: Colors.orange,
    style: ElevatedButton.styleFrom(
        primary: Colors.orange,
        padding: EdgeInsets.symmetric(vertical: 16.0),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
    ),
    child: Text(
        buttonTitle,
        style: buttonTextStyle,
    ),
),

あとはコメントアウトしたコードを削除して、ホットリロードしてもとのデザインに戻っていることを確認すれば、移行は完了です。

このように変更したことのメリットとしては、ButtonStyleをひとまとめにして、使い回しがしやすくなるというところでしょうか。以下のような書き方ができます。

final ButtonStyle buttonStyle = ElevatedButton.styleFrom(
    primary: Colors.orange,
    padding: EdgeInsets.symmetric(vertical: 16.0),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
);

return ElevatedButton(
    onPressed: callback,
    style: buttonStyle,
    child: Text(
        buttonTitle,
        style: buttonTextStyle,
    ),
),

参考サイト

https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0/edit