Help us understand the problem. What is going on with this article?

開発効率が上がるFlutter x Android StudioのTips集

最近Flutterを触り始めて「これは開発効率高まるな/高まるかもしれない」と思ったことがいくつもあったのでまとめてみます。他にも見つかり次第、追記しようかと思います。

Hot Reload

ファイル保存時(もしくはHot Reloadボタンをクリックしたとき)に変更内容がデバッグ中のアプリに反映されます。わざわざビルドし直さなくていいのはかなり楽です。
hotReload.gif

Hot Reloadボタンはこちらにあります。
スクリーンショット 2020-06-07 10.54.18.png

Flutter Inspector

Flutter Inspectorの中のSelect Widget Modeの紹介をします。
これを有効にした状態でデバッグ中のアプリのWidgetをタップすると、Widgetツリー上でハイライトされたり、該当コードが表示されたりします。
有効にしたい場合はInspector内の Enable Select Widget Mode ボタンをタップします。
Enable Select Widget Mode
動きは以下の通りです。
inspector.gif

これがあれば「この画面ってコード上でどのScreenだっけ?」「このWidgetのレイアウトコードは?」といったことが簡単にわかります。

Flutter Outline

資料があまりなくてよくわかってないのですが、Flutter Outlineの中の、おそらくHot UIと呼ばれているものについて紹介します。Hot UIは以下の場所から有効にします。
Hot UI

Flutter Outlineの下に編集可能なプロパティ一覧が現れ、編集するとHot Reloadされて変更が反映されるとともに、コードも変更してくれます。固定値でも、変数でも大丈夫なようです。
HotUI.gif

この他、例えば色の変更などもできます。

Flutter Studio

Flutter Studioを使えばWebブラウザ上でFlutterのUIを作成することができ、かつそのコードやpubspecファイルを書き出すこともできます。うまく活用すればエンジニア以外もFlutterのデザインを作ることができます。
ただ、直前の操作を取り消すことができないっぽいのと、1度配置したものを別の場所に移動できないっぽいのが難点かなと思っています。
FlutterStudio.gif

コードはこのようなものが出力されました。
スクリーンショット 2020-06-07 11.46.38.png

Rive

RiveはかつてFlareと呼ばれていたもので、ブラウザ上でアニメーションを作成することができます。つまりエンジニア以外の人も作ることが可能です。
雰囲気は↓こちらでわかるかと思います。
animation.gif

作ったアニメーションはBinary形式でエクスポートが可能で、Flutterプロジェクト上では flare_flutter を使って取り込むことができるようです(ここから先はやってないので気になる方は他の記事を参照してください)。

ML Complete

TensorFlowを活用した、コード補完機能です。GitHub上のDartコードを解析して、次に入力されるコードを推測しているらしいです。

設定はFind Action(Command + Shift + A)から Registry を選択、
スクリーンショット 2020-06-07 10.24.07.png

dart.server.additional.arguments--enable-completion-model を設定して、再起動すればOKです。
スクリーンショット 2020-06-07 10.26.09.png

実際これを導入してから、補完精度が上がった気がします。

Widget等の追加、削除

Macの場合、Widgetの上で option + Enter をするとWidgetの追加、削除項目が現れます。下の例ではCenter Widgetを追加してみました。
widget.gif

ちなみに、順番を変えたり
changeOrder

childをchildrenに変えたりすることもできます。
convertToChildren

iOSのStoryboard, xibでViewの階層を変えようと思ったらわりと大変ですが、これなら楽に変えられます。

その他

Flutter x Android Studioに限った話ではないけど、以下も便利です。

保存時の自動フォーマット

保存をしたときに正しいフォーマットに直してくれます。設定は以下のチェックをオンにするだけです。
autoFormat

メソッドの抽出

Widgetの上で option + command + M すると、メソッドに切り出すことができます。
extractMethod

Live Template

スニペットを簡単に呼び出すことができる機能です。デフォルトでいくつか定義されていますが、自分で追加することもできます。
liveTemplate
動きとしてはこんなかんじです。
liveTemplete.gif

akatsuki174
iOS→Androidエンジニアになりました。それなりに使える言語はSwift, Objective-C, Kotlin, Java。 UX, データ分析, グロースハック, デザイン, 自然言語処理にも興味あり。 1分野に固まらず、いろんな分野のことについて書いていこうと思います。
techtrain
プロのエンジニアを目指すU30(30歳以下)の方に現役エンジニアにメンタリングもらえるコミュニティです。
https://techbowl.co.jp/techtrain/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away