====== 01.Windows10にFlutterをインストール ======
{{tag>flutter}}
 ---//2021/5/22更新//

[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]

Flutterは、もともとiOS/Androidアプリ作成用フレームワークですが、2021年3月より、Webアプリも作成できるようになりました。ただし、Webアプリとしてはスピードは速くなく、大規模なWebサイトやブログの作成には向かないとのことです。
===== 見出し =====
Windows10 (1909)にFlutter 2.2 をインストールした経過を、以下に記載させていただきました。(2021年5月)
https://i-doctor.sakura.ne.jp/font/?p=46146
Windows10にFlutter2.2をインストールしてFultterWebを試してみる

Windows10 (1803)にFlutter 1.12 をインストールした経過を、以下に記載させていただきました。(2019年12月)
https://i-doctor.sakura.ne.jp/font/?p=42109
『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示

Windows10 (1803)にFlutter 1.9 をインストールした経過を、以下に記載させていただきました。(2019年9月)
https://i-doctor.sakura.ne.jp/font/?p=41098

===== 開発環境 =====
<code>
Windows 10 Pro (1909)
git version 2.29.2.windows.2
Chrome
VisualStudioCode 1.55.2
</code>
gitのインストールについては、[[https://qiita.com/manabu-watanabe/items/ecf1b434baf305adaa00|こちらのサイト]]が分かりやすいです。

今回構築した環境
<code>
Flutter 2.2
VisualStudioCodeのFlutter Extensions
</code>

===== WindowsにFlutter(Web)をインストールするときの流れ =====

  -Flutter SDKをダウンロードして解凍
  -Windowsの環境変数にflutterのPATHを通す
  -VisualStudioCodeでflutter doctor コマンドを実行して環境チェック
  -新規Flutterアプリを作成
  -VisualStudioCodeのExtensions(拡張機能)でFlutter(dart-code.fultter)を入れる

詳細は<wrap hi>[[https://i-doctor.sakura.ne.jp/font/?p=46146|Windows10にFlutter2.2をインストールしてFultterWebを試してみる(2021/5/22)]]</wrap>をご覧ください。

また、Androidアプリを作成するためのFlutterの設定方法については、<wrap hi>[[https://i-doctor.sakura.ne.jp/font/?p=42109|『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示(2020/1/5)]]</wrap>をご覧ください。
===== Flutter SDKのダウンロード =====
以下のサイトへ行き、SDKをインストールするためのZIPファイル（約650MB）をダウンロードして展開し、中身のflutter/ フォルダを、D:/ 直下(またはC:/ 直下)にコピーします。
https://flutter.dev/docs/get-started/install/windows
{{:00.flutter:pasted:20200107-044235.png}}

1分くらいでダウンロードが終了するので、ZIPファイルをダブルクリックして開き、 中のflutter/ フォルダを、そのまま、D:/ 直下(またはC:/ 直下)にドラッグ＆ドロップします。
{{:00.flutter:pasted:20200107-044436.png}}

なんと1.54 GBもあります。コピーするだけで1時間くらいかかりそうです。他のことをします。恐ろしや、、、



===== Flutterをインストールした後はCodelabがお勧め =====

英語ですが、上から順番にやっていくのが良いと思います。

https://flutter.dev/docs/codelabs
{{:00.flutter:pasted:20200103-025515.png}}

===== リンク =====
https://flutter.dev/docs/get-started/web
Building a web application with Flutter (公式サイト)

https://zenn.dev/fastriver/books/caff13da8b852c
FlutterでWebアプリ開発入門 fastriver

https://zenn.dev/kazutxt/books/flutter_practice_introduction
Flutter実践入門 ～環境構築からAndroid/iOS/Webに広告を付けて同時にリリース!!～
kazutxt
2021/5/23 2.1.1版
→すごく分かりやすいです。


https://recruit.gmo.jp/engineer/jisedai/blog/flutter2-canvaskit-performance/
2021.03.23
Flutter 2で使えるWebAssemblyレンダラー CanvasKit は本当に高速なのか？
===== リンク =====
目次：[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]

前：[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]

次：[[00.flutter:02.flutterでwebアプリを作成|02.FlutterでWebアプリを作成してNetlifyにデプロイ]]