Flutterやーる（Windows10、Android）

# はじめに
Flutterやっていくー

# 開発環境
- Windows 10
- flutter

# 実装
1．flutter（flutter_windows_2.8.1-stable.zip）のダウンロード

https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_2.8.1-stable.zip

2．PATHを通す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ae35663f-0f92-15d3-cb86-bf10b709d732.png)

3．コマンドプロンプトを開く

~~~
C:\Users\good_>flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                      16.4s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19042.1466], locale ja-JP)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] VS Code (version 1.63.2)
[√] Connected device (2 available)

! Doctor found issues in 2 categories.
~~~

4．Android Studio（android-studio-2021.1.1.20-windows.exe）のインストール

https://developer.android.com/studio?hl=ja#downloads

5．Do not import settingsを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4ebd2f36-0cbc-75cb-6463-96cd5676d895.png)

6．Customを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/86aa5bc6-a6ba-529b-78bf-fd2ac89f5024.png)

7．Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/593c6c1d-a7bd-c2af-398e-f89f1ece97f1.png)

8．UIテーマの決定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/419fc9a1-52e3-779c-88a4-5ebb319d32ba.png)

9．下記にチェックを入れる。（Android Virtual Deviceはインストールされていた）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3071b424-8b87-3137-8258-7e2b3097faf3.png)

10．エミュレータの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e096c68c-2b59-e6fe-5ed0-37687b8c4ca2.png)

11．ライセンス承認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/679a6ea0-ceae-07e1-6f16-ebb8d9ceeb4c.png)

12．Device Managerでデバイスを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/06475487-2b17-5c49-5876-eb1f6602e19d.png)

13．エミュレータを再生してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/41921361-48f5-2aa2-c349-8278796f5e3b.png)

14．VSCodeにFlutterをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/afb3d0bb-dc1a-c343-b2ed-5ab7414f6d2b.png)

15．コマンドプロンプトを開き、Androidライセンスを許可する

~~~コマンドプロンプト
C:\Users\good_> flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to
resolve this.
~~~

~~~
C:\Users\good_>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19042.1466], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.63.2)
[√] Connected device (3 available)

! Doctor found issues in 1 category.
~~~

16．Android SDK Command-line Toolsをインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6524de6f-84d9-461e-a9f3-72146c43cf96.png)

17．システム環境変数に以下を追加
C:\Users\good_\AppData\Local\Android\Sdk\cmdline-tools\latest\bin

18．コマンドプロンプト再起動して

~~~コマンドプロンプト
C:\Users\good_> flutter doctor --android-licenses
...
Accept? (y/N): y
All SDK package licenses accepted
~~~

~~~コマンドプロンプト
C:\Users\good_>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19042.1466], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.63.2)
[√] Connected device (3 available)

• No issues found!
~~~

19．VSCodeでF1を押して、FlutterProjects以下にアプリを作成

20．flutter runするとエミュレータ上で実行される

~~~
C:\Users\good_>flutter run
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5bda20c5-7f5e-cb03-c526-e621acf88acc.png)

21．ここからはコーディングしていく。。。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">コードでUI作る感じなんか<br>初級編1:画面の構築(Widget)<a href="https://t.co/dHMtnPT2V6">https://t.co/dHMtnPT2V6</a> <a href="https://twitter.com/hashtag/Flutter?src=hash&amp;ref_src=twsrc%5Etfw">#Flutter</a> <a href="https://t.co/ETdobZXB8o">pic.twitter.com/ETdobZXB8o</a></p>&mdash; がちもとさん@メタバース熊本 (@sotongshi) <a href="https://twitter.com/sotongshi/status/1488178565799890946?ref_src=twsrc%5Etfw">January 31, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

お疲れ様でした。

# 参考文献

https://qiita.com/smiler5617/items/fbfee798b641f0352176

https://qiita.com/ShortArrow/items/46ca3717384039419605