flutter環境設定 のバックアップ(No.3)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- flutter環境設定 へ行く。
- 1 (2024-07-02 (火) 12:17:48)
- 2 (2024-07-02 (火) 12:25:07)
- 3 (2024-07-05 (金) 19:06:07)
- 4 (2024-07-06 (土) 03:09:08)
flutter?
Windows 11でFlutter Web開発を始めよう！ †
はじめに †
このガイドでは、Windows 11でFlutter Web開発環境をセットアップする手順を詳しく説明します。Flutterを使用してWebアプリケーションを開発するための環境構築に焦点を当てています。
システム要件の確認 †
ハードウェア要件 †
| 最小要件 | 推奨 | ||
| CPU | x86_64 アーキテクチャ | 4コア以上 | 8コア以上 |
| メモリ | 8GB以上 | 16GB以上 | |
| ディスプレイ解像度 | 1366 x 768 (WXGA) | 1920 x 1080 (FHD) | |
| 空きディスク容量 | 2.5GB以上 | 2.5GB以上 | |
ソフトウェア要件 †
- Windows 10 64ビット版以降（Windows 11推奨）
- Windows PowerShell? 5.0以降（通常はOSに含まれています）
必要なツール †
- Flutter SDK（Dart SDKを含む）
- Git for Windows 2.27以降
- Google Chrome（Webアプリのデバッグ用）
- テキストエディタまたはIDE（推奨：Visual Studio Code）
セットアップ手順 †
1. 開発ツールのインストール †
- Git for Windowsをダウンロードしてインストール
- Google Chromeをダウンロードしてインストール（まだの場合）
2. Visual Studio Codeのセットアップ †
- Visual Studio Code（バージョン1.77以降）をダウンロードしてインストール
- VS Codeを起動し、拡張機能マーケットプレイスから「Flutter」拡張機能をインストール
flutterのインストール †
https://docs.flutter.dev/get-started/install
からインストール
flutter --version
コマンドができることを確認
3. Flutter SDKのインストール（VS Code使用） †
# 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の実行 †
PowerShell?を開き、以下のコマンドを実行：
flutter doctor
出力を確認し、必要に応じて追加のセットアップを行います。
5. Webアプリ開発の有効化 †
PowerShell?で以下のコマンドを実行：
flutter config --enable-web
6. 最初のFlutter Webプロジェクトの作成 †
PowerShell?で以下のコマンドを実行：
flutter create my_first_web_app cd my_first_web_app flutter run -d chrome
これにより、デフォルトのFlutterアプリがChromeで起動します。
トラブルシューティング †
- &font(b){flutter doctor};の出力で問題が報告された場合、詳細情報を得るために&font(b){flutter doctor -v};を実行してください。
- Android StudioやVisual Studioに関する警告は、Web開発のみを行う場合は無視して構いません。
次のステップ †
- Flutterの基本的なウィジェットとWeb特有の機能について学ぶ
- レスポンシブデザインの実装方法を理解する
- Flutter公式ドキュメントのWebセクションを参照して、知識を深める
リソース †
楽しいFlutter Web開発ライフを！
