Flutter やってみた - ちょっとうろうろ

flutter で手頃にスマホアプリが作れると聞いたので、試しにやってみることにした。

まずは Flutter のコード打ち込んで動くようになるのを目指す。

環境は maxOS です。

インストール

適当な所にダウンロードした zip を配置して、

export PATH=$PATH:`pwd`/flutter/bin

するか、.bash_profile に

export PATH=$PATH:[flutterのパス]/flutter/bin

を追加してパス通せば flutter コマンドが使えるようになる。

で、セットアップのために下記のコマンドを実行する。

flutter doctor

そうすると、flutter で開発を行うのに必要なツールを教えてくれる。

ちなみに xcode のライセンス認証だけは先にしておかないとそれ以外何も教えてくれないので注意

個々のツールのセットアップ方法に関しては、公式チュートリアルに説明があるのでそちらに従ってやれば Android・iOS 双方の開発環境が整う。

とりあえず VS Code と Connected device 以外チェックが付けばOKか？

やったこと

流すのもあれなので一応やったことを覚え書き

Android

とりあえず公式から Android Studio をダウンロード。エディタが必要ないなら sdk だけ入れれば良さそうだけど、今回は全部入れた。記事書いてる時点では ver.3.2 だ。

インストール後、とりあえず適当にプロジェクト作って動作することを確認、Android toolchain の項目にもチェックが付くはず。

自分はこれに加えて Android licenses not accepted と言われたので、flutter doctor --android-licenses を実行したらチェックが付いた。

それから、Flutter と Dart のプラグインを入れる。Android Studio を起動した後、Configure -> Plugins を開く。そして Browse Repositories で Flutter を検索すると、Flutter というプラグインがあるはずなので、これをインストール。すると同時に Dart をインストールするか訊かれるので、一緒にインストールする。その後、Android Studio を再起動すれば、プラグインが使えるようになるはず。

Android Studio の項目から×がなくなれば OK。

iOS

Xcode と HomeBrew が必要なので、なければインストールしておく。

その後、doctor の指示に従い、

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

としていけば OK。

サンプルプロジェクト

今回は VS code でやってみた。

コマンドパレットで Flutter: New Project を選択し、適当なフォルダにプロジェクトを作成してみる。これだけで必要な環境が揃う。最近は楽で良い。

flutter を実行する前に、任意のエミュレータを起動しておく必要がある。flutter emulators でインストールされているエミュレータのリストが見られる。これらの内のどれかを flutter emulators --launch <emulator_id> 起動しておく。

その後、flutter run を実行すると、起動中のエミュレータに作成したアプリがインストールされ、動作を見ることができるようになる。

ちなみにホットリロードを行うには起動した上で r を、ホットリスタートを行うには R をタイプすれば良い。実行を止めるには q だ。いいね。

試しにホットリロードをやってみよう。チュートリアルに従い、

home: MyHomePage(title: 'Flutter Demo Home Page'),

を

home: Scaffold(
appBar: AppBar(
    title: Text('Welcome to flutter')
),
body: Center(
    child: Text('child')
),

にして保存し、ホットリロード。するとエミュレータ上のアプリではボタンが消え、中央にテキストが表示される。ちゃんと動いてるね。

デバッグビルドにも少し時間がかかるので、ホットリロードするのがおすすめ。ところで保存にフックする方法はないんだろうか。

また、外部パッケージを pubspec.yaml に追加した場合も、VS Code だと自動で flutter packages get が実行された。有能かよ。

まとめ

Flutter の環境構築やった、超楽（Windows は知らん）
公式チュートリアルのコード写経した
Android Studio より楽しい（今のところ）

Flutter の苦手分野とかまだ見えてないのでまだなんとも言えないが、簡単なアプリ作るのに必要な機能は一通り揃ってる感じなんだろう。これからもちょっとずつ触ってみよう。