ウンcodeプログラマの日常

底辺大学生プログラマの技術的なメモです

SDK v1.0出たしFlutter触ってみる(環境構築)

Flutterとは?

GoogleDartというGoogle自身が開発した言語でAndroidiOSどちらのアプリもネイティブに開発できるという結構楽しそうなやつです。
Googleが将来的にAndroidを捨て新しいOSをリリースする際にFlutterアプリが増えていれば簡単に新OSの方でもアプリが揃い、最初からアプリ不足に悩まずにいけるのを狙っているらしいです。
しらんけど。
ちなみにDart自体はJSなどに変換できるそうです。

ちなみに公式サイト

flutter.io

Flutterを使えるようにする

今回はWindows10(1809)にエディタとしてVisualStudio Codeを利用していきます。
使う端末はAndroid Pie(9)のPixel 3です。
## Android Studioをインストールする 特に説明は必要無いでしょう。
AndroidStudioをインストールします。

Android StudioDartとFlutterのプラグインを入れる

もしかしたらVS Codeで使うなら必要無いのかもしれませんが、とりあえず入れます。
Android Studioを起動し、Configure - Pluginsを選択します。
f:id:MogamiTsuchikawa:20181205125936p:plain 画面下のBrowse repositoriesをクリックします。
f:id:MogamiTsuchikawa:20181205140915p:plain 新しい画面に切り替わるのでそこで検索ボックスにflutterと入力し検索します。
FlutterFlutter i18nが出てきますがFlutterの方をインストールします。
同時にDartもインストールするか聞かれるのでYesを選んでください。

Google USB Driverをインストールする

Windowsユーザーのみ必要な作業のようです。
下記URLよりダウンロードします。
https://developer.android.com/studio/run/win-usb

VS Codeのセットアップ

VS Codeの拡張よりFlutterプラグインをインストールします。
インストールが終わったら再読込をしておきます。

FlutterのSDKをセットアップする

下記URLより flutterのSDKをダウンロードします。

Windows install - Flutter

zipファイルですし後々問題を起こしたくないのでzipファイルのプロパティよりセキュリティの項目にチェックを付けて適用します。
f:id:MogamiTsuchikawa:20181205150309p:plain

zipファイルを解凍し、flutterフォルダを任意の場所に置きます。
今回はC:\src\flutterという構成にしました。Program Filesフォルダー内はオススメされません。
SDKの配置が終わったら次はPowerShellを起動し先ほどのC:\src\flutterに移動します。
まずは、flutterフォルダないのflutter_console.batを実行します。
.\flutter_doctor.batと打って実行します。
まずはAndroid SDKのライセンスに同意する作業をします。
flutter doctor --android-licensesと打ちます。そうするとライセンス文出てくるんで(しっかり読んで)yを入力して同意していってください。
同意するのは何個かあります。
それが終わったら最後はUSBデバッグモードをONにした端末をPCに繋ぎます。
flutter doctorと打って環境が正しく構築されているかを確認します。問題なければ全てチェックマークが付きます。PowerShellだと色も付くのでわかりやすいですね。
f:id:MogamiTsuchikawa:20181206092553p:plain 上記の画像ではあえてスマホを繋がずにエラーを出しています。スマホも含め全て問題なければ[!]は無くなり、全て[√]がつきます。

VS Codeで動くか検証する

flutter doctorコマンドをVS Code でも動くかを確認します。
VS Codeのコマンドパレットにdoctorと打ちます。そうすると候補にFlutter:Run Flutter Doctorと出てくるのでクリックして実行します。
そうすると、右下にFlutterのSDKどこだよ?的なメッセージが出てきますんで、そのメッセージをクリックして先ほどのC:\src\flutterフォルダを指定します。
flutter doctorコマンドで先ほどと同じように全て[√]が出たら環境構築は正しく出来ています。

サンプルをとりあえず動かしてみる。

まず、プロジェクトを作りたいフォルダをVS Codeで開きます。
VS Codeのコマンドパレットを出しFlutterと打ちます。候補の中からFlutter:New Projectを選択します。
そうするとプロジェクトの名前をどうするか聞かれるので入力してください。
プロジェクト作成完了したら早速F5キー押して実行しましょう。
ビルドなどには時間がかかるので気ままに待ちましょう。
apkなどが出来るとスマホに転送されデバッグが開始されます。
初期アプリでは画面右下の+ボタンを押すことでカウントが増える者みたいですね。

おわりに

結構説明を省いているところがあるので、分からないこととかあったら是非Twitter等で聞いてください。
@MogamiTsuchikaw
自分もFlutter勉強中なのでFlutterチョットデキルようになったらまた続きを書きます。