Flutter2.0から非推奨になったボタンと新しいボタンについて

BPSの福岡拠点として一緒にお仕事させていただいております、株式会社ウイングドアのミノハラです。
去年の4月に入社して、主にFlutterを使ってスマホアプリ開発を行っています。

今月の初めにFlutterはメジャーバージョンが2.0にアップデートされました。

参考: Flutter 2.0.0 release notes - Flutter

いままでの開発で使っていたボタンのウィジェットが今回のアップデートによって非推奨になってしまいました。
そこでどのように変わったのかまとめていきたいと思います。

なにが非推奨になったのか

RaisedButton・FlatButton・OutlineButtonの3つです。
Flutter1.22から変更はありましたが、今回のアップデートにより、非推奨となりました。
この3つのボタンが非推奨になり、以下のボタンを使ってくださいとなっています。

どのように変わったのか

名前が変わっただけではなく、主にスタイルの書き方が大きく変わったなという印象です。
例として今回はRaisedButtonとElevatedButtonの違いをみていきます。

RaisedButton

RaisedButton(
  color: Colors.blue,
  onPressed: () {},
  child: Text('RaisedButton'),
),

ElevatedButton

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                                              // ↑< >に型を指定する
  ),
  onPressed: () {},
  child: Text('ElevatedButton'),
),

いままではRaisedButtonのプロパティにColorなどがあり、直接指定することができました！
しかし、ElevatedButtonはButtonStyleというもので指定する必要があります。
Textウィジェットを使うときのTextStyleのようにButtonの見た目（スタイル）はButtonStyleを使ってくださいということですね！

少しコードは長くなってしまいますが、見た目の部分は一つにまとめられるので、個人的にはこちらの方がわかりやすくていいなという印象です！

MaterialStatePropertyとは？

Stateとあるように状態のことです！
つまり、「ボタンを押した時」などのMaterialStateの状態によって変わる値です。
MaterialStateには以下のような状態があります。

enum MaterialState {
  /// The state when the user drags their mouse cursor over the given widget.
  ///
  /// See: https://material.io/design/interaction/states.html#hover.
  hovered,

  /// The state when the user navigates with the keyboard to a given widget.
  ///
  /// This can also sometimes be triggered when a widget is tapped. For example,
  /// when a [TextField] is tapped, it becomes [focused].
  ///
  /// See: https://material.io/design/interaction/states.html#focus.
  focused,

  /// The state when the user is actively pressing down on the given widget.
  ///
  /// See: https://material.io/design/interaction/states.html#pressed.
  pressed,

  /// The state when this widget is being dragged from one place to another by
  /// the user.
  ///
  /// https://material.io/design/interaction/states.html#dragged.
  dragged,

  /// The state when this item has been selected.
  ///
  /// This applies to things that can be toggled (such as chips and checkboxes)
  /// and things that are selected from a set of options (such as tabs and radio buttons).
  ///
  /// See: https://material.io/design/interaction/states.html#selected.
  selected,

  /// The state when this widget disabled and can not be interacted with.
  ///
  /// Disabled widgets should not respond to hover, focus, press, or drag
  /// interactions.
  ///
  /// See: https://material.io/design/interaction/states.html#disabled.
  disabled,

  /// The state when the widget has entered some form of invalid state.
  ///
  /// See https://material.io/design/interaction/states.html#usage.
  error,
}

今回は全ての状態で同じ値にしたいので、MaterialStateProperty.allとしています。
状態によって色などを変更したい場合には、MaterialStateProperty.resolveWithを使います。

ボタンを押した時に色を変えたい場合

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
        (Set<MaterialState> states) {
      if (states.contains(MaterialState.pressed)) return Colors.red;
      return Colors.blue;
    }),
  ),
  onPressed: () {},
  child: Text('TextButton'),
),

必要に応じて設定してあげるといいと思います。

ちなみに、MaterialStatePropertyの型はジェネリクスを使って指定します。
ElevatedButtonの例のように、色の指定をしたい場合はColorにしてあげてください。

abstract class MaterialStateProperty<型引数> {

まとめ

• 3つのボタンが非推奨になってしまった。
• ボタンの見た目部分をButtonStyleで一括りにできる。
• MaterialStatePropertyとは状態によって変わる値のこと。

先述したとおり、ボタンの見た目をButtonStyleで一括りにできるのは個人的にわかりやすくていいなと感じました！
Flutter2.0がリリースされ、ボタン以外にも色々変わったことがあるので、興味があれば見てみてください。
ちなみに今回記事にしたボタンの部分は以下の公式ページに詳しく書かれているので、こちらも興味ありましたら確認してみてください！

参考: New Buttons and Button Themes - Flutter

株式会社ウイングドアでは、Ruby on RailsやPHPを活用したwebサービス、webサイト制作を中心に、
スマホアプリや業務系システムなど様々なシステム開発を承っています。