目次

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

2021/5/22更新

スマホアプリ作成フレームワーク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アプリにして写経してみる(1)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)をインストールするときの流れ

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

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

また、Androidアプリを作成するためのFlutterの設定方法については、『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(1)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にデプロイ