SDK v1.0出たしFlutter触ってみる(環境構築)
Flutterとは?
GoogleがDartというGoogle自身が開発した言語でAndroid・iOSどちらのアプリもネイティブに開発できるという結構楽しそうなやつです。
Googleが将来的にAndroidを捨て新しいOSをリリースする際にFlutterアプリが増えていれば簡単に新OSの方でもアプリが揃い、最初からアプリ不足に悩まずにいけるのを狙っているらしいです。
しらんけど。
ちなみにDart自体はJSなどに変換できるそうです。
ちなみに公式サイト
Flutterを使えるようにする
今回はWindows10(1809)にエディタとしてVisualStudio Codeを利用していきます。
使う端末はAndroid Pie(9)のPixel 3です。
## Android Studioをインストールする
特に説明は必要無いでしょう。
AndroidStudioをインストールします。
Android StudioにDartとFlutterのプラグインを入れる
もしかしたらVS Codeで使うなら必要無いのかもしれませんが、とりあえず入れます。
Android Studioを起動し、Configure
- Plugins
を選択します。
画面下のBrowse repositories
をクリックします。
新しい画面に切り替わるのでそこで検索ボックスにflutter
と入力し検索します。
Flutter
とFlutter 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をダウンロードします。
zipファイルですし後々問題を起こしたくないのでzipファイルのプロパティよりセキュリティの項目にチェックを付けて適用します。
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だと色も付くのでわかりやすいですね。
上記の画像ではあえてスマホを繋がずにエラーを出しています。スマホも含め全て問題なければ[!]
は無くなり、全て[√]
がつきます。
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チョットデキルようになったらまた続きを書きます。