0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Flutter環境構築(Windows)_2024/08/30

Last updated at Posted at 2024-08-30

VScode インストール

VSCodeの拡張機能にあるFlutterをインストール

Dart-Code.flutter

そのほかに入れた便利拡張機能

PKief.material-icon-theme
formulahendry.auto-close-tag
formulahendry.code-runner
pranaygp.vscode-css-peek
smelukov.vscode-csstree
dNk.halfscroll
vincaslt.highlight-matching-tag
ecmel.vscode-html-css
bradgashler.htmltagwrap
oderwat.indent-rainbow
MS-CEINTL.vscode-language-pack-ja
glenn2223.live-sass
esbenp.prettier-vscode
shardulm94.trailing-spaces

Gitのインストール+環境設定

システムの詳細設定を開く

240830_01_システムの詳細設定.png

環境変数を設定

画面下部のシステム環境変数を編集し、Gitのインストール先フォルダ(C:\Program Files\Git\bin)(C:\Program Files\Git\cmd)を設定

Android Studio インストール

下記を参考にさせていただきました。ありがとうございます!
こちらの初期設定までを実施。「2. Hello Worldの表示」は不要。

Android toolchain

Android Studio を起動し、SDK Manager を起動

240810_Android_Studio.png

SDK Tools を選択し、下記画面にして、
Android SDK Command-line Tools をチェックし、OK押して、
Android toolchain をインストール

240810_Android_toolchain.png

Visual Studio インストール

下記からVisual Studioをインストール
このときに "Desktop development with C++"もインストールすること。
https://visualstudio.microsoft.com/downloads/

もし"Desktop development with C++"のインストールを忘れてしまったら、インストールプログラムを起動後に下記の「変更」を押すこと
240830_02_VisualStudioインストール後にやる場合.png

FlutterSDKのインストール

VSCodeを開く→Ctrl+Shift+P からコマンドパレットを開き、 flutter new project を選択
Download SDK を実行
進捗はVisual Studio Code 画面下部にある Output タブを参照。
Gitのパスが通っていない場合はここでエラーが出る。

FlutterSDKのパスを環境変数に追加

  • Win+R→cmd からコマンドプロンプトを起動し、下記コマンドにてパスが通っていることを確認
flutter -v

Flutterプロジェクトを新規作成

rem プロジェクト作成先のフォルダに移動
cd flutter
rem "sample"プロジェクトを新規作成
flutter create sample

240810_flutterプロジェクト作成時.png

具体的な進め方

rem libフォルダ内にmodelsフォルダを作成
mkdir lib\models
rem Windows版の場合、niコマンドでファイルを新規作成
ni lib\models\hoge.dart

flutter run 実行

もし環境設定に不備がある場合、flutter run コマンドでプロジェクトを起動しようとして失敗する。

flutter run

240810_flutter_run実行時.png
ここでは flutter doctor コマンドの実行が要求される。
要するに問題点を特定してくれる。すごい。

Flutter doctor 実行

flutter doctor

240810_flutter_doctor実行時.png

[☑]はOKなやつ。[!]とか[x]がダメなやつ。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?