flutter環境設定
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
Markdown
]
開始行:
<!-- markdown -->
[flutter](./flutter)
# Windows 11でFlutter Web開発を始めよう！
## はじめに
このガイドでは、Windows 11でFlutter Web開発環境をセットア...
## システム要件の確認
### ハードウェア要件
|>|>|CENTER:最小要件|CENTER:推奨|
|---|---|---|---|
|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:https://git-scm.com/download/win](./Gi...
- [Google Chrome:https://www.google.com/chrome/](./Google...
### 2. Visual Studio Codeのセットアップ
- [Visual Studio Code:https://code.visualstudio.com/](./V...
- VS Codeを起動し、拡張機能マーケットプレイスから「Flutte...
### flutterのインストール
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使用）
# VS Codeを起動
# Ctrl + Shift + P でコマンドパレットを開く
# 「flutter」と入力し、「Flutter: New Project」を選択
# 「Download SDK」オプションを選択（SDKがまだインストール...
# FlutterのSDKをインストールする場所を選択（例：C:\dev\fl...
# ダウンロードとインストールが完了するまで待機
# インストール完了後、「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};の出力で問題が報告された場合、...
- Android StudioやVisual Studioに関する警告は、Web開発の...
## 次のステップ
- Flutterの基本的なウィジェットとWeb特有の機能について学ぶ
- レスポンシブデザインの実装方法を理解する
- Flutter公式ドキュメントのWebセクションを参照して、知識...
## リソース
- [Flutter公式ドキュメント:https://flutter.dev/docs](./Fl...
- [Flutter Webアプリ開発ガイド:https://flutter.dev/docs/g...
楽しいFlutter Web開発ライフを！
終了行:
<!-- markdown -->
[flutter](./flutter)
# Windows 11でFlutter Web開発を始めよう！
## はじめに
このガイドでは、Windows 11でFlutter Web開発環境をセットア...
## システム要件の確認
### ハードウェア要件
|>|>|CENTER:最小要件|CENTER:推奨|
|---|---|---|---|
|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:https://git-scm.com/download/win](./Gi...
- [Google Chrome:https://www.google.com/chrome/](./Google...
### 2. Visual Studio Codeのセットアップ
- [Visual Studio Code:https://code.visualstudio.com/](./V...
- VS Codeを起動し、拡張機能マーケットプレイスから「Flutte...
### flutterのインストール
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使用）
# VS Codeを起動
# Ctrl + Shift + P でコマンドパレットを開く
# 「flutter」と入力し、「Flutter: New Project」を選択
# 「Download SDK」オプションを選択（SDKがまだインストール...
# FlutterのSDKをインストールする場所を選択（例：C:\dev\fl...
# ダウンロードとインストールが完了するまで待機
# インストール完了後、「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};の出力で問題が報告された場合、...
- Android StudioやVisual Studioに関する警告は、Web開発の...
## 次のステップ
- Flutterの基本的なウィジェットとWeb特有の機能について学ぶ
- レスポンシブデザインの実装方法を理解する
- Flutter公式ドキュメントのWebセクションを参照して、知識...
## リソース
- [Flutter公式ドキュメント:https://flutter.dev/docs](./Fl...
- [Flutter Webアプリ開発ガイド:https://flutter.dev/docs/g...
楽しいFlutter Web開発ライフを！
ページ名:
