0
1

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版)

Last updated at Posted at 2024-01-18

Flutterの環境構築の手順

  • Flutter SDKのインストールとパス設定
  • Android Studioのインストールとセットアップ
  • Visual Studioのインストールとプラグイン追加
  • Chromeのインストール ※インストール済みのため手順無し
  • VSCodeのインストール ※インストール済みのため手順無し
  • VSCodeにFlutterの拡張機能を追加
  • 最終確認

Flutter SDKのインストールとパス設定

(1) Flutter公式サイトよりダウンロード
image.png
(2)任意のフォルダ(今回は『D:\dev』に設定)に圧縮ファイルを配置して、解凍する。
(3)システム環境変数の中にある「Path」を選択し編集を押下
(4)システム環境変数でOKを押して、登録完了
 参考:環境変数設定 Windows10

Android Studioのインストールとセットアップ

(1)Android Studio公式サイトからダウンロード
image.png
(2)ダウンロードされたファイル「android-studio-~-windows.exe」
を実行して、Android Studioを配置する場所を決める
image.png
(3)インストールが始まるので、完了したらFinishを押下
image.png
(4)『Do not inport settings』でOKを押下。次画面でDon't send を押下
image.png
(5)NEXTを押下
image.png
(6)licenseの項目すべてに対して、Acceptを押下する後、Finishを押下。
image.png
(7)Finishを押下。
image.png
(8)More Action> SDK Manager を押下
image.png
(9)Languages & Frameworks>Android SDK>タブ[SDK Tools] で
 Android SDK Command-Line Tools を選択し、OKを押下
image.png

(10)ポップアップが出たらOKを押下。
 インストール終わったら、Finishを押下。
image.png
(11)コマンドプロンプトを開き、「flutter doctor --android-licenses」を入力
「y」を入力する必要が何度かあります。
image.png
(12)Android Studio を開き、Plugins>検索バーに「Flutter」を入力
>Flutterを選択>installを押下 
image.png
(13)設定完了。Android Studioを閉じる。

Visual Studioのインストールとプラグイン追加

(1)Visual Stadio公式から
Visual Stadioコミュニティをダウンロード
image.png
(2)ダウンロードしたファイル「VisualStudioSetup.exe」を実行
続行を押下し、インストールが開始されます
image.png
(3)インストール中に下記の画像のようなものが表示される
「C++によるデスクトップ開発」にチェック。インストールを押下。
補足:タブ[インストールの場所]で自分が配置したいディレクトリを設定で可能。
image.png
(3)OKボタンを押下し、起動を押下。
image.png
(4)今はスキップを選択し、右上の「×」ボタンで閉じる
image.png

VSCodeにFlutterの拡張機能を追加

(1)VScodeを開く。
(2)左の拡張機能アイコン>検索バーに「Flutter」を入力>Installを押下
image.png

最終確認

(1)コマンドプロンプトを開き、「flutter doctor」を入力。
緑のチェックマーク がつけばOK。
image.png

これでFlutterの環境構築はすべて完了になります

0
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?