[[flutter]]
* Windows 11でFlutter Web開発を始めよう！ [#z78a9d78]
** はじめに [#n746820d]
このガイドでは、Windows 11でFlutter Web開発環境をセットアップする手順を詳しく説明します。Flutterを使用してWebアプリケーションを開発するための環境構築に焦点を当てています。
** システム要件の確認 [#t85b2c9d]
*** ハードウェア要件 [#y3c7f1e8]
|>|>|CENTER:最小要件|CENTER:推奨|h
|CPU|x86_64 アーキテクチャ|4コア以上|8コア以上|
|メモリ||8GB以上|16GB以上|
|ディスプレイ解像度||1366 x 768 (WXGA)|1920 x 1080 (FHD)|
|空きディスク容量||2.5GB以上|2.5GB以上|
*** ソフトウェア要件 [#u2d9e3f7]
- Windows 10 64ビット版以降（Windows 11推奨）
- Windows PowerShell 5.0以降（通常はOSに含まれています）
** 必要なツール [#p4f8h6j2]
- Flutter SDK（Dart SDKを含む）
- Git for Windows 2.27以降
- Google Chrome（Webアプリのデバッグ用）
- テキストエディタまたはIDE（推奨：Visual Studio Code）
** セットアップ手順 [#r5g9k7m3]
*** 1. 開発ツールのインストール [#s6h0l8n4]
- [[Git for Windows:https://git-scm.com/download/win]]をダウンロードしてインストール
- [[Google Chrome:https://www.google.com/chrome/]]をダウンロードしてインストール（まだの場合）
*** 2. Visual Studio Codeのセットアップ [#t7i1m9o5]
- [[Visual Studio Code:https://code.visualstudio.com/]]（バージョン1.77以降）をダウンロードしてインストール
- VS Codeを起動し、拡張機能マーケットプレイスから「Flutter」拡張機能をインストール
*** flutterのインストール [#b8f13794]
https://docs.flutter.dev/get-started/install
からインストール
gitなどのインストールやandroidstudioのインストールをしたほうがいいよと書いてあるので前提のアプリ的なものをインストールする。
flutter doctor
でいろいろチェックする
最初は、必要なツールとかのインストールがたりてないから、いろいろエラーが出る
難しかったのをピックアップすると、
cliツールは、android studioをインストール後、ちょっと図解が必要なところにある
オプションを入れないといけないかんじ
ググると、教えてくれているページがあった。
https://qiita.com/ch0c0bana0/items/36ea0fb9d6857f6dac5e
ライセンス登録だとこんな感じ
flutter doctor --android-licenses
y/N みたいなのがでるので、yと入力してエンターしまくる感じ、しつこく出てくる。
flutter --version
コマンドができることを確認
*** 3. Flutter SDKのインストール（VS Code使用） [#u8j2n0p6]
# VS Codeを起動
# Ctrl + Shift + P でコマンドパレットを開く
# 「flutter」と入力し、「Flutter: New Project」を選択
# 「Download SDK」オプションを選択（SDKがまだインストールされていない場合）
# FlutterのSDKをインストールする場所を選択（例：C:\dev\flutter）
# ダウンロードとインストールが完了するまで待機
# インストール完了後、「Add SDK to PATH」を選択してPATHに追加
*** 4. Flutter doctorの実行 [#v9k3o1q7]
PowerShellを開き、以下のコマンドを実行：
flutter doctor
出力を確認し、必要に応じて追加のセットアップを行います。
*** 5. Webアプリ開発の有効化 [#w0l4p2r8]
PowerShellで以下のコマンドを実行：
flutter config --enable-web
*** 6. 最初のFlutter Webプロジェクトの作成 [#x1m5q3s9]
PowerShellで以下のコマンドを実行：
flutter create my_first_web_app
cd my_first_web_app
flutter run -d chrome
これにより、デフォルトのFlutterアプリがChromeで起動します。
** トラブルシューティング [#y2n6r4t0]
- &font(b){flutter doctor};の出力で問題が報告された場合、詳細情報を得るために&font(b){flutter doctor -v};を実行してください。
- Android StudioやVisual Studioに関する警告は、Web開発のみを行う場合は無視して構いません。
** 次のステップ [#z3o7s5u1]
- Flutterの基本的なウィジェットとWeb特有の機能について学ぶ
- レスポンシブデザインの実装方法を理解する
- Flutter公式ドキュメントのWebセクションを参照して、知識を深める
** リソース [#a4p8t6v2]
- [[Flutter公式ドキュメント:https://flutter.dev/docs]]
- [[Flutter Webアプリ開発ガイド:https://flutter.dev/docs/get-started/web]]
楽しいFlutter Web開発ライフを！
