差分

このページの2つのバージョン間の差分を表示します。

--- 00.flutter:01.windows10にflutterをインストール [2021/05/22] – [01.Windows10にFlutterをインストール] adash333
+++ 00.flutter:01.windows10にflutterをインストール [2021/05/23] (現在) – [リンク] adash333
@@ 行 1: / 行 1: @@
 ====== 01.Windows10にFlutterをインストール ======
 {{tag>flutter}}
- ---//2020/1/2 更新//
+ ---//2021/5/22更新//
 [[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]
+Flutterは、もともとiOS/Androidアプリ作成用フレームワークですが、2021年3月より、Webアプリも作成できるようになりました。ただし、Webアプリとしてはスピードは速くなく、大規模なWebサイトやブログの作成には向かないとのことです。
 ===== 見出し =====
 Windows10 (1909)にFlutter 2.2 をインストールした経過を、以下に記載させていただきました。(2021年5月)
@@ 行 18: / 行 19: @@
 ===== 開発環境 =====
-Windows10 Pro (1809)
+<code>
-git version 2.21.0.windows.1
+Windows 10 Pro (1909)
-VisualStudioCode 1.41.1
+git version 2.29.2.windows.2
-gitのインストールについては、こちらのサイトが分かりやすいです。
+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:/ 直下)にコピーします。
@@ 行 37: / 行 53: @@
 なんと1.54 GBもあります。コピーするだけで1時間くらいかかりそうです。他のことをします。恐ろしや、、、
-コピーが終了したら、C:/flutter/　フォルダを開き、flutter_console.bat をダブルクリックして実行します。
-{{:00.flutter:pasted:20200107-044538.png}}
-Windows Defenderの警告画面が出ますが、『詳細情報』＞『実行』の順にクリックして実行します。
-{{:00.flutter:pasted:20200107-044643.png}}
-{{:00.flutter:pasted:20200107-045338.png}}
-{{:00.flutter:pasted:20200107-045348.png}}
@@ 行 57: / 行 62: @@
 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
+/5/23 2.1.1版
+→すごく分かりやすいです。
+https://recruit.gmo.jp/engineer/jisedai/blog/flutter2-canvaskit-performance/
+.03.23
+Flutter 2で使えるWebAssemblyレンダラー CanvasKit は本当に高速なのか？
 ===== リンク =====
 目次：[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]
@@ 行 64: / 行 85: @@
 前：[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]]
-次：
+次：[[00.flutter:02.flutterでwebアプリを作成|02.FlutterでWebアプリを作成してNetlifyにデプロイ]]