初心者と一緒にFlutterを学ぼう
という感じで一個のアプリを作るところまでやりたいと思います。なぜFlutterかというと
初心者でもとっつきやすそうなのと、新しいのと、クロスプラットフォームが魅力的だからです。
まずJSやれやって感じですが、まあなんかおもろそうなやつから勉強していきます。
ちなみにインフラエンジニアは現時点で一年半くらいやってますが、アプリとかは作ったことないのでほぼ初心者と一緒にやっていく感じです。
読んで書くことを重視した内容にします
まず環境構築だ！
まずはFlutterで開発できるように環境を構築していきやす
必要なものは
- Flutter
- Android Studio
- (Visual Studio)とか
です。
とりあえず初心者としては、Google様謹製のAndroid Studioを使っていくのがいいと思います。
Flutterを入れていく
このSDK（Software Development Kit)をダウンロードします。Zipファイルなので解凍します。そうするとflutterというファイルが出てきます。
次にCドライブ直下にsrcというフォルダを作ります。
そのsrcフォルダにflutterフォルダを移動してあげるとOKです。
環境変数Pathを編集とflutter doctor
環境変数とはどこでも使える変数のことです。
本来C:\src\flutter\binでしかflutterコマンドを打てませんが、
どこのディレクトリにいてもflutterコマンドを打てるようにします。
スタートボタン左にある検索バーにenvと打ちシステム環境変数の編集をクリックします
一番下にある環境変数をクリックし、Pathと書かれているところをクリックして編集を押します
Pathがない場合は新規でPathを作ります。
次に新規を押し、C:\src\flutter\binと入力してOKを押します
これで完了です。
次に早速flutterコマンドを入力してみます。
検索バーにcmdと入力してコマンドプロンプトを開き、flutter doctorと入力します。
flutter doctorコマンドはflutterを動かすためのツールなどが入っているかどうかチェックされます。
Visual Studioは今のところいりませんがAndroidStudioとSDKは要るのでインストールしていきます
Android Studioのインストール
Download Android Studio & App Tools – Android Developers
AndroidStudioを上のリンクからダウンロードしてインストールします。
ふつうにインストールしていきます
インストール出来たら立ち上げnextで進んでいきます
componentなどをダウンロードできたらこんな感じの画面になるのでPluginを選択しflutterとdartをインストールします。
flutter doctorをするとこんな感じ まだSDKが入っていません
SDKを入れていきます NewProjectの下のmore actionsをクリックしてSDK Managerを開きます
AndroidSDKを選択してSDK toolsから SDK command-line toolsを選択してダウンロードします
それが終わったらこのコマンドでライセンス認証します。ライセンス条項が出てくるので全部yを押してenterを押すと承諾という感じになります
こんな感じになれば環境はだいたい整いました
AVDを入れる
AVDはandroidの仮想マシンです。つまりパソコン上で仮想androidスマホを作成してくれます。
開発したものを動かしたりするときに必要なのでインストールします。
NewProjectの下のmore actionsを押してVirtual Device Managerを開き、右上のcreate deviceをクリックします
なんでもいいので選んでnextを押します
Recommendedにあるものすべてダウンロードします。
ダウンロードできてFinishを押せば完了です。
Project作成
トップの画面に戻りNew Flutter Projectを選択します。そしてSDKのパスを入れます
こんな感じで設定が出るので Finishを押します
Flutterの準備が完了しました
次のパートではサンプル動かしたり実際にいろいろやってみたいと思います
