Flutter 環境構築(Windows)
サークルのFlutter環境構築に向けて書いた記事です。
初めての記事かつFlutter初心者が書いているため、内容に不備等があるかもしれません。ご了承ください。
必要なもののダウンロード
最初に、必要なものをダウンロードしてしまいましょう。ダウンロードした場所はきちんと覚えておくこと。
Flutter SDK
こちらから最新のFlutterSDKをダウンロードします。
Android Studio
こちらからAndroid Studioをダウンロードします。
Flutter SDKのセッティング
Flutter SDKを解凍する
ダウンロードしたFlutterSDKは「flutter_windows_3.0.1-stable.zip」のような名前のzipファイルになっているはずなので、これを解凍しておきます。解凍が終了すると、自動的に解凍先のフォルダが出てくると思うので閉じないでおきましょう。
Flutterのパスを通す
Flutterのパスを通しておきます。パスを通しておけば、実行ファイル名のみでプログラムを実行できます。詳しくはこちらをどうぞ↓
では、パスを通していきます。
先ほど解凍したときに出てきたフォルダを見てみましょう。おそらく、今は「flutter」という名前のフォルダが現在位置になっているはずです。
今回は、この「flutter」フォルダの一階層下にある「bin」というフォルダのパスを通したいので、「bin」を見つけてダブルクリックします。↓
「bin」フォルダに移動すると上の画像のようになるかと思います。さらに、赤枠の右端あたりをクリックすると
C:\Users\ユーザ\Desktop\flutter\bin
こんな感じのものが出てきます。これがパスです。必要なのでコピーしておきます。
次に、パスを通すために「環境変数を編集」を検索して開きます。「システム環境変数を編集」ではないので注意してください。↓
「環境変数を編集」が開けたら、「ユーザ環境変数」項目の「Path」を選択して「編集」を押します。↓
「環境変数名の編集」ウィンドウが出てくるので、右側にある「新規」を押します。
すると、入力ができるようになるので、先ほどコピーしておいたパスをここに貼り付けて「OK」を押します。
これでパスを通す作業は終了です。
flutter doctor
FlutterSDKのセッティングが終わったので、Flutterコマンドが使えるようになっているはずです。FlutterにはFlutter doctorというコマンドがあり、Flutterの環境構築に足りていないものを教えてくれます。
flutter doctorを実行してみる
コマンドプロンプトやPowerShellなどのコマンドラインツールを開き、パスを通したディレクトリにcdコマンドで移動します。パスを忘れてしまった人は、「環境変数を編集」からパスを通した場所を確認しましょう。(わざわざ移動しなくても動くような気はしますが...)↓例
$ cd C:\Program Files\development\flutter_windows_2.2.1-stable\flutter\bin #先頭の$マークは入力しないでね
移動先で以下のコマンドを入力します。
$ flutter doctor
実行に成功すると、下画像のようになります。
環境構築済の状態でflutter doctorをしているので、ここまで緑チェックマークは出ないと思います。!やXマークだらけかもしれませんが、今は気にせずに先に進ましょう。
Android環境のセッティング
flutter doctorの!やXマークの項目にはおそらくAndroid関連のものがいくつかあったはずです。Android環境がない方は当然怒られるので、セットアップをします。
AndroidStudioのインストール
最初にダウンロードしたAndroidSturioのインストーラを起動します。起動後にいろいろ難しいことを聞かれますが、基本的には「Next>」を押していけば問題ありません。
AndroidStudioの設定・プラグインのインストール
Android Studioのインストールが終わると、Android Studioが起動します。
AndroidoStudioの設定とプラグインのインストールについては、下記の記事の「Android Studioの設定」と「Flutterプラグインのインストール」の2項目を参考にしてやってみてください。
設定とインストールが終わったら、もう一度flutter doctorしてみましょう。
$ flutter doctor
Android Studioを入れたので、Android Studioの項目にチェックマークがついていればひとまずOKです。
エミュレータのダウンロード
エミュレータがないと実際の端末でどんな動作をしているのかわからないので、エミュレータをダウンロードしておきます。
Android Studioでプラグインのインストールまですると初期画面に「Start a new Flutter project」が現れるので、これをクリックします。
このときに、flutter SDKのパスを聞かれるのでflutter SDKのパス(ただし、/binは削除)を入力して次に進みます。↓
次の画面に進むとプロジェクト名や保存場所を聞かれます。今回は適当に入力して終わります。↓
プロジェクトが開けると、下のような画面になります。エミュレータをダウンロードしたいので、赤枠のアイコンをクリックします。↓
すると、デバイスマネージャが開くので「Create device」をクリックします。↓
デバイスを選択する画面が出てくるので、Phoneカテゴリの中のデバイスを選択しましょう(例えばPixel5)。
デバイスはAndroidのバージョン等が関係あるかもしれませんが、好きなものを選んで問題ないかと思います。↓
そのあとは、特に何も触らずに進んで大丈夫だと思います。
これで、エミュレータのダウンロードは終わりです。
Androidライセンスを承認
flutter doctorがAndroidライセンスを承認しろ、と怒っているはずなので承認しましょう。
以下のコマンドでAndroidライセンスを承認できます。
$ flutter doctor --android-licenses
flutter doctor
ここまでで、Flutter環境構築に必要な作業は終了しました。試しにflutter doctorをしてみます。
$ flutter doctor
こんな感じ(念のため)
正常に環境構築ができていれば、ほぼすべての項目がチェックマークになっていると思います。
Visual Studioの項目は、Visual Studioを使わないのであればチェックマークになっている必要はありません。(本記事ではVisual Studioには触れません)
Visual Studio Code(VSCode)での開発環境をつくる
先ほどダウンロードしたAndroid Studioでも当然Flutter開発はできますが、VSCodeでもFlutter開発をすることができます。
VSCodeがすでにダウンロード済みであるものとして話を進めます。
拡張機能をインストールする
VSCodeを起動して、左側のサイドバーの正方形が4つあるアイコンをクリックします。↓
検索画面が出てくるので「flutter」で検索します。↓
「Flutter」拡張機能を見つけてクリックすると、下のようになるので「インストール」ボタンをクリックします(画像はインストール済みの状態です)。↓
これで、VSCodeでのFlutter環境ができました。
以上で環境構築は終了です。
Hello Worldやここから先について
Hello WorldやFlutterの基本については、以下の本がわかりやすいです(無料)。
参考
- cistLTの #technic_flutter
(すでにリンクを貼っているものは除く)
Discussion