最近Flutterを触り始めて「これは開発効率高まるな/高まるかもしれない」と思ったことがいくつもあったのでまとめてみます。他にも見つかり次第、追記しようかと思います。
Hot Reload
ファイル保存時（もしくはHot Reloadボタンをクリックしたとき）に変更内容がデバッグ中のアプリに反映されます。わざわざビルドし直さなくていいのはかなり楽です。
Hot Reloadボタンはこちらにあります。
Flutter Inspector
Flutter Inspectorの中のSelect Widget Modeの紹介をします。
これを有効にした状態でデバッグ中のアプリのWidgetをタップすると、Widgetツリー上でハイライトされたり、該当コードが表示されたりします。
有効にしたい場合はInspector内の Enable Select Widget Mode ボタンをタップします。
動きは以下の通りです。
これがあれば「この画面ってコード上でどのScreenだっけ？」「このWidgetのレイアウトコードは？」といったことが簡単にわかります。
Flutter Outline
資料があまりなくてよくわかってないのですが、Flutter Outlineの中の、おそらくHot UIと呼ばれているものについて紹介します。Hot UIは以下の場所から有効にします。
Flutter Outlineの下に編集可能なプロパティ一覧が現れ、編集するとHot Reloadされて変更が反映されるとともに、コードも変更してくれます。固定値でも、変数でも大丈夫なようです。
この他、例えば色の変更などもできます。
Flutter Studio
Flutter Studioを使えばWebブラウザ上でFlutterのUIを作成することができ、かつそのコードやpubspecファイルを書き出すこともできます。うまく活用すればエンジニア以外もFlutterのデザインを作ることができます。
ただ、直前の操作を取り消すことができないっぽいのと、1度配置したものを別の場所に移動できないっぽいのが難点かなと思っています。
コードはこのようなものが出力されました。
Rive
RiveはかつてFlareと呼ばれていたもので、ブラウザ上でアニメーションを作成することができます。つまりエンジニア以外の人も作ることが可能です。
雰囲気は↓こちらでわかるかと思います。
作ったアニメーションはBinary形式でエクスポートが可能で、Flutterプロジェクト上では flare_flutter を使って取り込むことができるようです（ここから先はやってないので気になる方は他の記事を参照してください）。
ML Complete
TensorFlowを活用した、コード補完機能です。GitHub上のDartコードを解析して、次に入力されるコードを推測しているらしいです。
設定はFind Action（Command + Shift + A）から Registry を選択、
dart.server.additional.arguments に --enable-completion-model を設定して、再起動すればOKです。
実際これを導入してから、補完精度が上がった気がします。
Widget等の追加、削除
Macの場合、Widgetの上で option + Enter をするとWidgetの追加、削除項目が現れます。下の例ではCenter Widgetを追加してみました。
ちなみに、順番を変えたり
childをchildrenに変えたりすることもできます。
iOSのStoryboard, xibでViewの階層を変えようと思ったらわりと大変ですが、これなら楽に変えられます。
その他
Flutter x Android Studioに限った話ではないけど、以下も便利です。
保存時の自動フォーマット
保存をしたときに正しいフォーマットに直してくれます。設定は以下のチェックをオンにするだけです。
メソッドの抽出
Widgetの上で option + command + M すると、メソッドに切り出すことができます。
Live Template
スニペットを簡単に呼び出すことができる機能です。デフォルトでいくつか定義されていますが、自分で追加することもできます。
動きとしてはこんなかんじです。
