よ～しFlutterでアプリ開発していくぞ！
むむ、まだ開発できる準備ができていないんじゃないかな？
エディターがあるだけじゃダメなの？VSCode入れたんだけど。
FlutterのSDKだったり、色々設定が必要だね。早速やってみようか！
ここではWindows環境でのFlutter開発の準備、環境構築を解説していきます！
Flutterについてはこちら！
VSCodeとAndroid Studioのインストール
まずは開発環境を整えるためVisual Studio CodeとAndroid Studioをインストールしましょう！
それぞれのインストール方法は以下の記事で解説していますのでご参考ください！
FlutterのSDKをダウンロードしよう！
SDKというのはつまり開発キットだね。これをダウンロード・インストールしよう！
上記のサイトにアクセスします。
全て英語なので、ブラウザで翻訳してもらうといいかもしれません。（Chromeなら上部検索バー内、お気に入りボタンの左のボタンが翻訳ボタンです）
今回はWindows想定なので左のWindowsを選びます。OSが違う方は対象のOSを選んでください。
左のAndroidを選びます。
ページを少しスクロールすると「Download then install Flutter（Flutterをダウンロードしてインストールする）」という項目があります。
今回は直接ダウンロード＆インストールしてみましょう。「Download and install（ダウンロードしてインストールする）」タブを選択し、青いボタンを押すとSDKのダウンロードが始まります！
英語むずい…翻訳しよう。
ダウンロードしたSDKをインストール（設定）しよう！
まずはzipファイルを解凍します。
解凍したものを配置する場所ですが、
- 管理者権限を必要としないところ
- パスの中のフォルダ名にスペースが含まれていないこと
が推奨されています。なので「Program Files」とかいかんですね。
筆者はCドライブ直下にフォルダを作成し、そこに置きました。
次にこのフォルダにパスを通す必要があります。パスの通し方は以下の記事をご参考ください。
これもまた筆者の例ですが、以下のようになりました。binフォルダまで通しましょう。
パスが通ったか確認しましょう。
コマンドプロンプトを開き「flutter –version」と打ってバージョンが表示されるか確かめてみましょう。コマンドプロンプトは画面下の検索窓に「cmd」と打つとすぐに出るので楽です。
うまく表示できましたか？
コマンドを認識しない場合はパスが通ってないよ！環境変数をもう一度確認してみよう。
Flutterに必要なツールを準備しよう！
ひえ～、長い、大変だぁ。
あと少しだよ！もうひと踏ん張り頑張ろう！
VSCodeにFlutter拡張プラグインを入れよう！
Flutterの拡張プラグインをVSCode入れましょう！
VSCodeを起動し、左のプラグインのボタンをクリックします。
検索窓に「Flutter」と打てば上記のプラグインがヒットしますので、インストールします。
C++のワークロードを準備しよう！
FlutterはVisual Studioの「C++によるデスクトップ開発」のツールが必要となります。
入れていない方はVisual Studioのインストールを行いましょう！やり方がわからない方は下の記事をご参考ください。インストール時の機能選択の際、「C++によるデスクトップ開発」にチェックを入れるのを忘れずに！
Googleのブラウザ「Chrome（クローム）」を入れよう！
Chromeを入れていない方はそれも入れましょう！
いつも使っているブラウザで「Chrome」と検索すると一番上に出てきますので、そこからダウンロード・インストールします。
あと少しじゃないんかい！！
ほ、本当にあと少しだから…。
必要なものが揃っているか確認しよう！
コマンドプロンプトで「flutter doctor」と打ってみましょう。
このコマンドはflutterと関連するツールがインストールされているかなどの状態をチェックするものです。
「✓」がついているものは問題なし、「！」は警告、「×」は問題あり・インストールしていない、というものです。
これが全部「✓」になっていればいいということです！
上記の画像はここまでと同じ操作をしたような状態での確認画面です。エラーがふたつ出ていますね。これを解決していきましょう！
Android SDKのコマンドラインツールエラー
「cmdline-tools component is missing」というものはAndroid SDKのコマンドラインツールがインストールされていないことで発生するエラーです。なのでそれを入れていきましょう。
AndroidStudioを起動します。
「More Actions」をクリックし、その中の「SDK Manager」をクリックします。
「SDK Tools」タブを選択し、「Android SDK Command-line Tools」にチェックを入れ、OKボタンをクリックします。
確認画面が出ます。OKボタンを押すとインストールが始まります。
Android SDKのライセンスエラー
「Android license status unknown」はAndroid SDKのライセンスに関するエラーです。ライセンスを承認する必要がありますので、それを行っていきましょう！
コマンドプロンプトにて「flutter doctor –android-licenses」と入力します。
するとライセンス本文が表示されますので、全て「y（yes）」を入力し承認します。
SDKのバージョンエラー
筆者の場合まだエラーが残っていましたのでその対応策も載せておきます。
Android SDKのバージョンがFlutterが求めるそれより低いとこのエラーが起きるようです。
最新のSDKは先ほど解説したAndroid StudioのSDKマネージャーからインストールできます。
最後にもう一度「flutter doctor」コマンドをコマンドプロンプトに打ってみましょう。全てチェックがついて「No issues found！」と表示されれば完璧です！
これでFlutterの開発準備は整った！
ああ…長かった…。
お疲れ様！でもこれで環境はOKだから次からは開発に入れるよ！
よ～し、これからガンガン開発していくぞ～！
■参考書籍
Flutter開発のプログラミング言語「Dart」についての記事もあるからよかったら見ていってね！
コメント