サンプル集  >  Flutter  >  インストール
インストール
2024/04/27

Flutterの開発環境をインストールします。

◆環境
OS Windows 10 Home 22H2 64bit OS x64 プロセッサ
  1. Android Studio インストール
  2. Android Studio 起動
  3. Flutterプラグイン インストール
  4. Android SDK インストール
  5. ライセンスの確認
  6. プロジェクト作成
  7. デバイスの作成
  8. デバッグ
  9. デバイスを別ウィンドウに表示

Android Studio インストール

Googleで検索します。


Android StudioのWebページを開きます。


「Android Studio Iguanaをダウンロード」をクリックします。


画面を下にスクロールさせます。


「上記の利用規約を呼んだうえで利用規約に同意します。」をクリックしチェックを入れます。 「ダウンロード Android Studio Iguana | 2023.2.1 Patch 1 Windows」をクリックします。

以下のファイルをダウンロードしました。

android-studio-2023.2.1.24-windows.exe

右クリックし「管理者として実行」を選択します。


「Next」をクリックします。


「Next」をクリックします。


「Next」をクリックします。


「Install」をクリックします。


30秒ぐらいでインストールが終わりました。


「Next」をクリックします。


「Finish」をクリックします。

Android Studio 起動

Android Studioを起動します。


「Don's send」をクリックします。


「Next」をクリックします。


「Next」をクリックします。


ライセンス条件が表示されました。


Acceptを選択し「Finish」をクリックします。


インストールが始まりました。


「Finish」をクリックします。


Flutterプラグイン インストール

Welcome画面が開きました。


Pluginsを選択します。


Flutterを選択し「Install」をクリックします。


Acceptをクリックします。


Restart IDEをクリックします。


Restartをクリックします。


再度Android Studioが起動しました。


flutter doctorで状況を確認します。


まだ X が残っています。

Android SDK インストール

「More Actions」から「SDK Manager」を選択します。


「Android SDK」を選択します。


「SDK Tools」タブを選択します。


「Android SDK Command-line Tools (latest)」にチェックをして「OK」をクリックします。


「OK」をクリックします。


インストールが始まりました。


「Finish」をクリックします。


「OK」をクリックします。


flutter doctorで状況を確認します。


まだ X が残っています。

ライセンスの確認

ライセンスを確認します。


「Y」を入力しEnterを押します。


flutter doctorで状況を確認します。


全てOKになりました。

プロジェクト作成

Android Studioを再起動します。


「Projects」をクリックします。


左のFlutterをクリックします。 Flutter SDK pathにFlutter SDKをインストールしたパスを指定します。


Project nameに stopwatch と入力します。


プロジェクトが作成されました。

デバイスの作成

Android Studioでプロジェクトが表示されています。


Device Managerをクリックします。


Create Virtual Devicerをクリックします。


ハードウェアの選択画面が開きました。


下にスクロールさせてPixel XLをクリックします。


「Next」をクリックします。


「Next」をクリックします。


インストールが始まりました。


「Finish」をクリックします。


「Next」をクリックします。


「Finish」をクリックします。

デバッグ

Device Managerをクリックします。


Pixel XL API 31 の右にある Start をクリックします。


「アクセスを許可する」をクリックします。


デバイスの画面が開きました。


しばらくするとデバイスのホーム画面が表示されました。


画面上部の虫のマーク(Debug 'main.dart')をクリックします。


画面下にコンソールが表示されました。


しばらくするとデバイスに数字が表示された画面が表示されました。


+ボタンをクリックすると数字が1加算されました。


Device Managerを開きStopをクリックします。


デバイスが停止しました。

デバイスを別ウィンドウに表示




Launch in the Running Devices tool windowのチェックを外します。


「OK」をクリックします


デバイスが独立したウィンドウで開きました!

▲ PageTop  ■ Home


Copyright (C) 2024 - 2025 ymlib.com