Flutter2 にしたら RaisedButton が deprecated になっていたので ElevatedButton に置き換えた

概要

先日Flutter2がリリースされたので更新してみたら。
RaisedButton が deprecated(非推奨) となっていました。
ElevatedButton に置き換わるようです。
(正確には v2 からの更新ではなく v1.25.0-8.1.pre からの更新のようです。)

今回は、自分が実装していたボタンの一例を用いて置き換えについて例を示します。

ボタンのイメージ

こんなボタンを作ってました。

コードの変更

変更前 (RaisedButton)

RaisedButton.icon(
  icon: Icon(Icons.event_note),
  label: Text("いつまで"),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
  )
)

変更後 (ElevatedButton)

RaisedButton で、 shape を適用していたのですが、
ElevatedButton には shape 項目がないようです。
その代わり、 style でデザインを指定する形となっています。
また、デフォルト配色が変わっていたので、そちらの指定も追加しています。

ElevatedButton.icon(
  style: ElevatedButton.styleFrom(
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
    primary: Color.fromARGB(255, 224, 224, 224), // 背景色
    onPrimary: Color.fromARGB(255, 0, 0, 0) // 文字色
  ),
  icon: Icon(Icons.event_note),
  label: Text("いつまで")
)

Styleを指定しなかった場合

Styleを指定しないデフォルトのデザインはこんな感じになってました。

ElevatedButton.icon(
   icon: Icon(Icons.event_note),
   label: Text("いつまで")
)

補足

自分のコードでは利用していなかったので、サンプルは示しませんが、
以下Widgetも変更があったようです。

変更前	変更後
FlatButton	TextButton
OutlineButton	OutlinedButton

マイグレーションについては、以下にGoogleドキュメントの資料がありましたので、
詳細な情報が必要な方はこちらを参照してみてください。

Migrating to the New Material Buttons and their Themes
https://docs.google.com/document/d/1yohSuYrvyya5V1hB6j9pJskavCdVq9sVeTqSoEPsWH0