Flutterのファースト・ステップ２のバックアップ(No.3)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
Flutterのファースト・ステップ２へ行く。
- 1 (2026-04-20 (月) 14:30:11)
- 2 (2026-04-20 (月) 16:15:22)
- 3 (2026-04-20 (月) 18:59:02)
- 4 (2026-04-20 (月) 23:04:15)
- 5 (2026-04-22 (水) 15:14:53)

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- ...Flutterの5thステップ
- Flutterのファースト・ステップ２
- Flutterのセカンド・ステップ２
- Flutterのサード・ステップ２

目次 †

↑

概要 †

2026年、リブートはFlutterデスクトップ（Windows）で実施

この選択肢は、単純にAndroid/iOSの準備が難しいケースが多いため。
Windowsでは、Android/iOSほど「カスタムURLスキームからの移行圧力」は強くなく、myapp:// 方式が今でも主流
（コレは、一先ず、WebAPIを経由した簡単なCRUD処理の実装と、OAuth系認証・認可処理を実装できれば良いため）

↑

詳細 †

↑

システム要件 †

Windows 10/11（64bit）
ストレージ：10GB以上の空き
RAM：8GB以上推奨

↑

インストール †

↑

Flutter SDK †

flutter.dev から Flutter SDK をダウンロード
%USERPROFILE%\develop\flutter\ などのパスに解凍
環境変数 PATH に %USERPROFILE%\develop\flutter\bin を追加
CMD / PowerShell?で確認
```
flutter --version
dart --version
```

↑

Visual Studio †

Visual Studio のインストールで「C++によるデスクトップ開発」ワークロードを選択
「MSVC v143（または最新）」「Windows SDK」コンポーネントが含まれていることを確認

↑

VS Code †

VS Codeのインストール
拡張機能 Flutter（Dart含む）をインストール

↑

設定 †

CMD / PowerShell?で

↑

有効化 †

Windowsデスクトップ対応を有効化

flutter config --enable-windows-desktop

↑

確認 †

依存関係の確認

flutter doctor

↑

開発 †

CMD / PowerShell?で

↑

作成 †

flutter create my_app

↑

編集 †

cd my_app

↑

実行 †

flutter run -d windows

↑

デバッグ †

デバイスを Windows (desktop) に切り替え。
- 右下のステータスバー（No Device）
- 若しくはコマンドパレット（Ctrl+Shift+P）→ Flutter: Select Deviceで、

Run and Debug (Ctrl+Shift+D / Cmd+Shift+D) で「デバッグと実行」→「Dart＆Flutter」

↑

導入 †

AI活用（https://claude.ai/chat）で、殆どWebを参照せず、作業を進めることが出来た（Sonnet4.6）。
先ずは、3分割レイアウトのCounterを作成してみる（flutter create でも Counter が生成される）。

↑

ツール類の導入手順 †

ココまでの導入手順もAIに生成させている。

↑

レイアウト変更 †

以下はプロンプト

１

以下で生成したコードを修正して3分割のヘッダ、左メニュー、メインエリアの画面を作成したい。
なお、左メニューのリンクを押下するとメインエリアが画面遷移するものとする。

flutter create my_app

修正内容を教えてください。

２
上記の出力が、全て lib/main.dart にまとめられていたため
```
ページのファイルは分割したい
```

以下は、出力から修正ポイントを抜粋したもの。

↑

参考 †

Flutterをデスクトップアプリ開発におすすめしない話 - izanami
https://izanami.dev/post/47b04883-8ea4-4282-85d9-d684bec4d0a1
デスクトップアプリ（Windows）の開発にFlutterを使うべき？ : r/FlutterDev?
https://www.reddit.com/r/FlutterDev/comments/1c9gwpx/should_i_use_flutter_for_desktop_app_windows/?tl=ja
デスクトップ開発ならFlutterとElectronの友達は何が違うんだ #Flutter - Qiita
https://qiita.com/UBinKitte/items/ce0596c18ab9fd1d03c7

Flutterを手動でインストールする
https://docs.flutter.dev/install/manual

FrontendTemplates?/UI/XPlat at develop · OpenTouryoProject?/FrontendTemplates?
https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/

Flutterのファースト・ステップ２ のバックアップ(No.3)

目次 †

概要 †

詳細 †

システム要件 †

インストール †

Flutter SDK †

Visual Studio †

VS Code †

設定 †

有効化 †

確認 †

開発 †

作成 †

編集 †

実行 †

デバッグ †

導入 †

ツール類の導入手順 †

レイアウト変更 †

†

†

ライブラリの載替 †

Counter画面 †

参考 †

Flutterのファースト・ステップ２のバックアップ(No.3)