01.Windows10にFlutterをインストール

—2021/5/22更新

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

開発環境

Windows 10 Pro (1909)
git version 2.29.2.windows.2
Chrome
VisualStudioCode 1.55.2

gitのインストールについては、こちらのサイトが分かりやすいです。

今回構築した環境

Flutter 2.2
VisualStudioCodeのFlutter Extensions

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

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

詳細はWindows10にFlutter2.2をインストールしてFultterWebを試してみる(2021/5/22)をご覧ください。

また、Androidアプリを作成するためのFlutterの設定方法については、『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示(2020/1/5)をご覧ください。

Flutter SDKのダウンロード

以下のサイトへ行き、SDKをインストールするためのZIPファイル（約650MB）をダウンロードして展開し、中身のflutter/ フォルダを、D:/ 直下(またはC:/ 直下)にコピーします。
https://flutter.dev/docs/get-started/install/windows

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

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

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

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

https://flutter.dev/docs/codelabs

リンク

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 は本当に高速なのか？

リンク

目次：スマホアプリ作成フレームワークFlutter

前：スマホアプリ作成フレームワークFlutter

次：02.FlutterでWebアプリを作成してNetlifyにデプロイ