Flutter Windows 環境セットアップ

flutter-install-android-studio dev

最近はやりのFlutterの環境セットアップしたのでメモしておきます。

Sponsored links

Flutter SDKのインストール

Install
Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

解凍したフォルダをD:\flutter に置いたよ

PS D:\> ls .\flutter\

    Directory: D:\flutter

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2021/03/05     10:41                .git
d-----        2021/03/05     10:41                .github
d-----        2021/03/05     10:41                .idea
d-----        2021/03/05     10:44                .pub-cache
d-----        2021/03/05     10:45                bin
d-----        2021/03/05     10:46                dev
d-----        2021/03/05     10:46                examples
d-----        2021/03/05     10:47                packages
-a----        2021/03/05     10:27           9851 .cirrus.yml
-a----        2021/03/05     10:27            858 .gitattributes
-a----        2021/03/05     10:27           2318 .gitignore
-a----        2021/03/05     10:27          10849 analysis_options.yaml
-a----        2021/03/05     10:27           2847 AUTHORS
-a----        2021/03/05     10:27            728 CODEOWNERS
-a----        2021/03/05     10:27           2772 CODE_OF_CONDUCT.md
-a----        2021/03/05     10:27           5286 CONTRIBUTING.md
-a----        2021/03/05     10:27           1630 dartdoc_options.yaml
-a----        2021/03/05     10:27           1731 flutter_console.bat
-a----        2021/03/05     10:27            303 flutter_root.iml
-a----        2021/03/05     10:27           1544 LICENSE
-a----        2021/03/05     10:27           1124 PATENT_GRANT
-a----        2021/03/05     10:27           4779 README.md
-a----        2021/03/05     10:27           3398 SECURITY.md
-a----        2021/03/05     10:49              5 version
  • ちなみにDドライブへの移動は以下コマンドで (よく忘れる)
PS C:\Users\hige> cd D:\
//  ユーザーの環境変数に設定する例
path =[System.Environment]::GetEnvironmentVariable('PATH','User')path +=";" + "D:\flutter\bin";
[System.Environment]::SetEnvironmentVariable('PATH',path,'User')
PS D:\> echopath
<途中略>;D:\flutter\bin

flutter doctorで環境を確認・整備

PS D:\> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.1, on Microsoft Windows [Version 10.0.21292.1010], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    X Flutter requires Android SDK 29 and the Android BuildTools 28.0.3
      To update the Android SDK visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] IntelliJ IDEA Community Edition (version 2018.3)
[√] VS Code
[√] Connected device (1 available)

! Doctor found issues in 1 category.

Android Studioはインストール済みだが、インストールしていなかったら以下から
https://developer.android.com/studio

Androidのライセンスに同意が必要みたいなので、言われている通り以下コマンド

flutter doctor --android-licenses

何回かyでEnterして以下メッセージですべて同意したことを確認
All SDK package licenses accepted

もう一回flutter doctor

PS D:\> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.1, on Microsoft Windows [Version 10.0.21292.1010], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    X Flutter requires Android SDK 29 and the Android BuildTools 28.0.3
      To update the Android SDK visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] IntelliJ IDEA Community Edition (version 2018.3)
[√] VS Code
[√] Connected device (1 available)

Android Studio 29が必要みたい

Android Studioの整備

FlutterもAndroid Studioを使って開発できるので、Androidアプリ開発している人には入りやすい。

Android Studioの 上のmenu Tools → SDK ManagerからインストールしたいバージョンをチェックしてOK

この辺りはAndroid StudioでAndroid開発をやっている経験を活かしてスッと解決したいところ

SDK 29(Android 10.0相当)と言われていたけど、SDK30(Android 11.0)をインストールしちゃう。最新をとりあえずいれておけばいいでしょ。
(2021年のAndroid S(Android12) Previewももうダウンロードできるのか。。また対応がめんどそうだな。)

android_studio_setup_sdk

これでもう一回 flutter doctorすると No issues found! ですね!

PS D:\> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.1, on Microsoft Windows [Version 10.0.21292.1010], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] IntelliJ IDEA Community Edition (version 2018.3)
[√] VS Code
[√] Connected device (1 available)

• No issues found!

Android Studioに Flutter と Dartのプラグインをインストールしていないけど、No issues foundが出てるな。
File → Settings → PluginでFlutterをインストールする。Dart is requiredみたいなのが出て一緒にDartもインストールされた。

flutter-sdk-install-dart-include

プロジェクト作成してみる

File → New → New Flutter Project で新しくFlutterのプロジェクトを作ってみる。
Flutter SDK pathはインストールしたflutter SDKのパス (flutter doctor コマンドがあるbin以下ではないのが注意)

create-flutter-project-first-time

.gitignoreの編集

プロジェクト作成後に自動的に作成された.gitignoreには以下を追加しておくといい感じだった。iOSビルドするときはまた追加したほうがいいのかな。

#.gradle
.gradle/

#local.properties (location of android sdk)
local.properties

チュートリアルをやる

UdemyのGoogleがやっているチュートリアルが良さそうだったのでやってみた。
https://classroom.udacity.com/courses/ud905
Lesson1と2がある。とりあえずLesson1だけやってみた。

まとめ

環境構築~UdacityのLesson1まで、09:30~18:00ぐらいかかった。途中昼休み一時間ぐらいはさんで。
Android開発やっているのでAndroid Studioの環境周りは扱いやすい印象。
Visual Studioでもできるようにしているのが、ウェブのバックグラウンドがある人でも、なじみやすくしている印象ですごい。
Android Studio一択だったらウェブの人だとちょっとなじみにくいのかも。
逆もまたしかりで、ネイティブの人、ウェブの人がどちらも参入しやすくなっている感じ。(iOSの人はどちらかがんばって使うのかな。)

UdacityのLessonはGitHubで模範解答あるので、最後まで解答みながらでもアプリが完成できる感じ。
Dart初心者の私には、答え参考にしながらじゃないと難しいところはあった。
JavaとJavascriptのいいとこどりみたいな感じか。
型もあるし、非同期処理はFutureとasync/awaitでウェブの人にはなじみやすそう。(AndroidのAsyncTaskよりは慣れれば断然良いと思う。KotlinのCoroutinはよく知らない。。)

参考サイト

Comments

タイトルとURLをコピーしました