10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter環境構築 - 3(Android Studio・Androidエミュレータセットアップ編)

Last updated at Posted at 2020-04-18

#はじめに
今回はFlutter環境構築第3弾 「Android Studio・Androidエミュレータセットアップ編」です!
Flutter SDKのインストール・Flutterコマンドのセットアップがお済みでない方は、
先に「Flutter SDKインストール編」をご覧ください。

Flutter環境構築シリーズ
Flutter環境構築 - 1(Flutter SDKインストール編)
Flutter環境構築 - 2(Xcode・iOSシミュレーターセットアップ編)
Flutter環境構築 - 4(VSCodeセットアップ編)

#「Android Studio・Androidエミュレータセットアップ編」でやること
本編では以下の項目を行います。

  • Android Studioのインストール
  • Android Studioのセットアップ
  • サンプルのFlutterアプリを実行
  • Androidエミュレータのセットアップ

#Android Studioのインストール

1.Android Studioをダウンロード

こちらのAndroidの公式サイトの「DOWNLOAD ANDROID STUDIO」をクリックする。
スクリーンショット 2020-04-16 18.17.45.jpg

すると規約と条件が表示されるので、
「I have read and agree with the above terms and conditions」の欄にチェックを入れて規約に承諾し、
「DOWNLOAD ANDROID STUDIO FOR MAC」をクリックしてダウンロードします。
※「I have read and agree with the above terms and conditions」のチェックを入れないとダウンロード出来ません。
スクリーンショット 2020-04-16 18.23.39.jpg

2.Android Studio DMGファイルを起動

ダウンロードしたAndroid Studio DMGファイルをダブルクリックして起動し、
ApplicationフォルダにAndroid Studioをドラッグ&ドロップします。
スクリーンショット 2020-04-16 19.10.51.png

これでAndroid Studioのインストールは完了です。

#Android Studioのセットアップ

1.Android Studioを起動

Android Studioをダブルクリックで起動します。
するとセットアップ画面が表示されるのでNextをクリックして進んでいきます。

  • 「Install Type」 はStandardのままでNextをクリック。
  • 「Select UI Theme」はDarculaLight、お好みで選択しNextをクリック。
  • 「Verify Setting」では設定内容を確認しFinishをクリック。するとComponentsのインストールが始まり、パスワードを求められたら入力します。
  • インストールが完了したらログが表示されますので、確認したらFinishをクリック。

すると以下のような画面が表示されます。
スクリーンショット 2020-04-16 19.51.56.png

2.Flutterプラグインのインストール

先程の画面右下のConfigureをクリックし、Preferencesをクリック。
スクリーンショット 2020-04-16 19.52.53.png

すると以下の画面が表示されます。
スクリーンショット 2020-04-16 20.25.20.png

左側のタブのPluginsをクリックし、検索欄にFlutterと入力し検索をかけます。
検索結果で出てくる、「Flutter」と「Flutter i18n」のinstallをクリックしインストールします。

  • 「Third-party Plugins Privacy Note」が表示されるので、Acceptをクリック。
  • 「Plugin Dependencies Detected」が表示されるので、YesをクリックしDartプラグインも同時にインストールします。

インストールが完了すると「Restart IDE」のボタンが表示されるのでクリックし、Android Studioを再起動します。
スクリーンショット 2020-04-16 20.26.56.png

するとAndroid Studio起動後の画面に「Start a new Flutter project」という欄が追加されます。
スクリーンショット 2020-04-16 19.51.56.jpg

これでAndroid Studioのセットアップは完了です。

#サンプルのFlutterアプリを実行

1.Flutterプロジェクトを開く

前編の「Xcode・iOSシミュレーターセットアップ編」で作成したmy_appファイルを開いていきます。
まずはAndroid Studioを起動した画面で、Open an existing Android Studio projectをクリックします。
スクリーンショット 2020-04-16 19.51.56 (1).png

するとファルダ一覧が表示されるので前編で作成したmy_appファイルを選択し、Openをクリックします。
するとプロジェクトが展開されます。

2.Flutterアプリを実行

プロジェクトが展開されたら、画面上方の****と書かれたセレクトボックスをクリックし、Open iOS Simulatorを選択します。
スクリーンショット 2020-04-18 18.34.08 (1).png

するとiOSシミュレーターが起動します。
スクリーンショット 2020-04-18 18.42.30.png

起動が完了したら、Android Studio画面上方のRunをクリックし、Flutterアプリを起動します。
スクリーンショット 2020-04-18 18.45.13.jpg

起動完了すると、iOSシミュレーターに反映されます。
スクリーンショット 2020-04-18 18.44.43.png

これでサンプルのFlutterアプリの実行が完了しました。

#Androidエミュレータのセットアップ

1.仮装デバイスを作成する

Android Studio画面の上タブのToolsをクリックし、AVD Managerを選択します。
スクリーンショット 2020-04-18 19.19.12.jpg

Your Virtual Devicesの画面が表示されるので、画面中央のCreate Virtual Devicesをクリックして仮装デバイスを作成します。
p7-3.jpg

お好みで仮装デバイスを設定してNextをクリックしていき、最後Finishをクリックすると仮装デバイスの作成ができます。
スクリーンショット 2020-04-18 19.52.15.png

作成が完了すると、Your Virtual Devices画面に先程作成した仮装デバイスが表示されます。
スクリーンショット 2020-04-18 20.00.29.png

2.Android Studioのセットアップ

Androidエミュレータを実行するために、Android Studio側でも設定を行います。
Android Studio画面の上タブのToolsをクリックし、SDK Managerを選択します。
スクリーンショット 2020-04-18 20.33.43.jpg

Preferences for ProjectsのAndroid SDK画面が表示されます。
Android SDK画面のSDK Platformsタブにて、先程作成した仮装デバイスのAndroidバージョンと同じバージョンのチェックボックスをクリックしてチェックを入れておきます。
スクリーンショット 2020-04-18 20.38.53.jpg

次にタブのSDK Platform右横のSDK Toolsをクリックします。
画面右下のHide Obsolete Packagesのチェックボックスを外し、Android SDK Tools(Obsolete)にチェックを入れます。
最後に画面右下のOK
をクリックすることで先程チェックを入れた、AndroidのバージョンとAndroid SDK Toolsがインストールされます。
スクリーンショット 2020-04-18 20.48.30.jpg

これでAndroidエミュレータを起動する準備が整いました。

3.AndroidエミュレータでFlutterアプリを起動

Your Virtual Devices画面に表示された仮装デバイスのActions欄のLaunch this AVD in the emulatorボタンをクリックして起動します。
スクリーンショット 2020-04-18 20.00.29 (1).png

以下Androidエミュレータ起動後画面。
スクリーンショット 2020-04-18 20.29.41.png

起動ができたら、iOSシミュレーターの時と同様にAndroid Studio画面のRunボタンをクリックすることで、現在展開中のFlutterプロジェクトを実行することができます。
スクリーンショット 2020-04-18 21.03.38.png

これでAndroidエミュレータにてFlutterアプリを実行できるようになりました。

#最後に
以上で「Android Studio・Androidエミュレータセットアップ編」は終了となります。お疲れ様でした。
Androidの実機にてアプリの確認をしたい場合はFlutter公式サイト
「Set up your Android device」欄を参考にしてみてください。

最後までご覧くださりありがとうございました。

Flutter環境構築シリーズ
Flutter環境構築 - 1(Flutter SDKインストール編)
Flutter環境構築 - 2(Xcode・iOSシミュレーターセットアップ編)
Flutter環境構築 - 4(VSCodeセットアップ編)

参考サイト[Flutter公式サイト]

10
5
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
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?