NEW ARTICLE
忙しい・読書が苦手な人にAmazon Audibleをおすすめする５つの理由

【Windows】Flutter開発環境構築手順まとめ【初心者脱却シリーズ】

【Windows】Flutter開発環境構築手順まとめ【初心者脱却シリーズ】

どうもこんにちはコウヘイです。

本シリーズは、Flutterについて完全初心者の私がFlutterをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。


以下のような疑問を持ちました。


そもそもアプリ開発が初めてなので、開発環境構築から始めます。Android Studioとかエミュレータとかもわからないので１から学びたいです。


今回はFlutterを使用するための環境構築手順についての作業ログと調べた内容をまとめたいと思います。

それでは本題。
今回は以下の内容になります。

著者情報

ちなみにですが、私は5年以上IT系エンジニアとして働いており、主にJavaを主戦場にしています。Webアプリケーションと業務系のアプリケーションの経験を持つごく普通のエンジニアです。

FlutterのSDKを取得

今回はWindowsでのFlutter開発環境手順になります。



Flutterを使えるようにするために、まずFlutterのSDKを公式サイトからから取得します。（以下リンクから飛べます）

≫ Flutter SDK

今回取得したSDKのバージョンは【1.17.5】です。
※環境構築時に最新のバージョン



今回は以下ディレクトリにzipファイルを解凍します。

C:\Users\kohei\development



FlutterのSDKには互換性のあるflutterコマンドとdartコマンドが含まれるみたいなので、個別でバージョンを気にしながらダウンロードする必要がないのでラクです。


解凍後はflutterディレクトリができました。（以下）

C:\Users\kohei\development\flutter

ここで注意すべきことは管理者権限が必要とするディレクトリには置かないようにしてください（C:\Program Files\など）（公式サイトより）

パスを通す

次にflutterコマンドのパスを通します。

ここらへんはJavaと同じなのですんなりいきました。

手順は以下です。

検索＞システム環境変数の編集＞環境変数



パスが通ったか確認します。※以下はGit Bashで実行してます。

$
$ which flutter
/c/Users/kohei/development/flutter/bin/flutter
$

Android Studioインストール

実際にFlutterを使用した開発をするためにはAndroid Studioを使用するので、以下サイトからインストールします。

≫ Android Studio


今回取得したAndroid Studioのバージョンは【4.0.1 for Windows 64-bit (871 MB)】です。


次に、取得した実行ファイル（android-studio-ide-193.6626763-windows.exe）を実行します。

実行するとポップアップ画面が表示されます。
自分の場合は何も変更せずにNextボタンを押してインストールしました。

最新のAndroid SDK、Android SDKコマンドラインツール、Android SDKビルドツールがインストールされるみたいです。（これらはAndroid向けに開発するときにFlutterで必要）

FlutterとDartのプラグインをインストール

Andoroid StudioでFlutterを使用するためにはそれ用のプラグインをインストールする必要があります。

手順は以下です。


①Android Studioを起動したらConfigure>Pluginsを押します。



②Plugins画面が表示されるので、下記のようにFlutterを選択し、インストールボタンを押します。



③インストールが完了したら下記のRestart IDE ボタンを押してAndroid Studio を再起動したらプラグインのインストールは完了です。

アプリケーション作成

それでは実際にアプリケーション開発できる状態になったのでアプリケーションを作成してみます。

手順は以下です。


①Android Studio を起動したらStart a new Flutter projectを押します。



②次に下記のようにFlutter Application を選択し、Nextボタンを押して下さい。



③作成するアプリケーションの設定を入力します。

入力し終えたら、Nextボタンを押します。



④パッケージ名を入力します。
この値はユニークでなければいけません。
今回は「life.kohei.calendar」としてます。

最後にFinishボタンを押して、アプリケーション作成完了です。

Androidエミュレータのインストール・起動

実際にデフォルトで数字をカウントするアプリケーションが作成されるので、Androidエミュレータで動作確認をしてみます。

まだ、Androidエミュレータをインストールできていないので、インストールしていきます。

以下、手順です。


①まず、下記の右上の赤枠のAVD Managerボタンを押します。



②下記の画面が表示されるので、真ん中のCreate Virtual Device..ボタンを押します。



③次に動作確認するAndroidのハードウェアを選択します。
今回は赤枠のPixel 3aを選択し、Nextボタンを押します。



④OSイメージをダウンロードします。
今回は赤枠のAndroid 10.0をダウンロードしました。



⑤ライセンスに同意し、Nextボタンを押します。



⑥インストールが開始されます。



⑦インストール完了したら、Finishボタンを押します。



⑧Nextボタンを押します。



⑨Finishボタンを押します。



⑩デバイス一覧にインストールしたデバイスが表示されていると思います。
再生ボタンを押すとAndroidエミュレータが起動します。



⑪正常に起動しました。
以上でAndroidエミュレータのインストールと起動について終了です。



余談ですが、スマホアプリ開発未経験の自分としては「お、みたことあるやつ！」ってなりました。笑

アプリケーションのビルド・起動

では、実際に起動したAndroidエミュレータでアプリケーションをデプロイし、起動してみます。

手順は以下です。


①右上のDebugボタンを押します。



②少し待つと、アプリケーションが起動しました。


おー表示できました！テンションあがりますね笑

その他

依存関係の確認

Fluterには環境をチェックし、Flutterインストールのステータスのレポートを確認できるコマンド（下記）が用意されてます。

へー便利だなと思いました笑

flutter doctor



実際に実行した結果が以下です。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.19041.388], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 4.0)
[!] VS Code (version 1.47.1)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.


FlutterとAndroid Studioをインストールしたのでチェックがついてますね。
逆に！マークはまだインストールされていないものになります。
VSCodeは普段Javaの開発でよく使うので、別の機会に導入してみたいと思います。

gitに登録

これからできるか不明ですがカレンダーアプリを作成していこうと考えています。

なのでgitでソース管理をしていきます。

余談ですがそのログも記載しておきます。

$ git add .
warning: LF will be replaced by CRLF in pubspec.lock.
The file will have its original line endings in your working directory

$ git status
On branch master

No commits yet

Changes to be committed:
（省略）

$ git commit -m "initialize Application"
[master (root-commit) c550678] initialize Application
 62 files changed, 1678 insertions(+)
（省略）

$ git log
commit c550678c03e2d8888b78bb4dd92c849fb1c42193 (HEAD -> master)
Author: kohei <sugatti51@gmail.com>
Date:   Fri Jul 17 16:43:18 2020 +0900

    initialize Application

$ git remote add origin git@github.com:kohei-21/flutter_calendar_application.git

$ git pull origin master
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (5/5), 1.14 KiB | 41.00 KiB/s, done.
From github.com:kohei-21/flutter_calendar_application
 * branch            master     -> FETCH_HEAD
 * [new branch]      master     -> origin/master
fatal: refusing to merge unrelated histories

$ git merge --allow-unrelated-histories origin/master
Already up to date!
Merge made by the 'recursive' strategy.

$ git pull origin master
From github.com:kohei-21/flutter_calendar_application
 * branch            master     -> FETCH_HEAD
Already up to date.

$ git push origin master
Enumerating objects: 90, done.
Counting objects: 100% (90/90), done.
Delta compression using up to 4 threads
Compressing objects: 100% (70/70), done.
Writing objects: 100% (89/89), 53.95 KiB | 421.00 KiB/s, done.
Total 89 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), done.
To github.com:kohei-21/flutter_calendar_application.git
   329ece2..46a5248  master -> master

$



以上、Flutterの開発環境構築手順でした。

感想は、僕の経験上、開発環境構築で躓く場合がほとんどでしたが今回はそんなに躓きませんでした。
これも大きなメリットかなとも思いました。

また、公式ドキュメントもしっかりとしている印象です。
これは非常に心強いです。

これから個人開発がんばります。

どなたかの参考になれば幸いです。



人気記事：【最新】Flutter学習におすすめの入門書3選