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