LoginSignup
1
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?

@hidepy(hidepy hidetaso)

【Flutter】Android開発環境を構築してエミュレータでアプリ起動確認まで(Windows環境)

Last updated at Posted at 2024-10-23

自分用のメモ。次回からFlutter開発環境を作るのに悩まなくて済むようにしたい

今回記事では環境構築をしてAndroidエミュレーターでアプリ起動確認までがスコープで、次回以降はFlutterのコーディングに踏み込んだ話をしていく(次回記事では、よくFlutter開発で使われるプラグインについて触れていく)

OS: Windows 11 Pro

各種ソフトウェアをダウンロード&インストール&設定

Git for Windows

Git for Windows公式サイトにアクセスして、Downloadを押下。
image.png

記事執筆時点のバージョンはGit-2.47.0.2。

Download後、exe実行でインストールするが、結構色々なオプションを問われます。
必要に応じて設定を変更しても良いが、後から変更もできるので一旦今回は全部デフォルトのままでインストールした。

GitはVSCode経由でFlutter SDKをinstallする際などで使用されるので最初に入れておく。

Visual Studio Code

ダウンロード&インストール

基本的に、コーディングやエミュレータ起動等はVSCode上で行う。Flutter開発を初めてはや3ヶ月程が経過するが、VSCode上での開発で特に不満に感じた点は無いので大丈夫だと思う。
(ただ、今回はAndroidネイティブ機能をゴリゴリに利用することになったが、その際は流石にKotlin on AndroidStudioで開発)

VSCode公式サイトにアクセスして、Download for Windowsを押下するだけ。
image.png

Flutter開発用のセットアップ

VSCodeを開き、左側のExtension-> 検索窓に「flutter」と入力、「Flutter」プラグインをインストール
image.png

Ctrl + Shift + Pでコマンドパレットを開き flutterを入力して出てくる Flutter:New Projectを選択
image.png

「SDKが無い」で怒られるはずなので「Download SDK」を押下。
image.png

今回は C:\flutter\ 配下にSDKをダウンロードすることに(VSCodeを管理者権限で開いておかないと権限的に上手くいかないかもしれないので注意)
image.png

SDKのダウンロードが正常に終わったら、再度コマンドパレットから Flutter: New Project

Applicationを選択
image.png

flutter applicationを配置する先を選択
image.png

flutterのproject名を入力。今回はデフォルトのままでいく。
image.png

暫く待つ。
image.png

正常終了。現状、Androidが×になっているが、後続でAndroid用の設定を行っていく。
image.png

まずはflutterがブラウザ上で動くところまでをやっていく。コマンドラインで flutter pub get
image.png

コマンドパレットで Flutter: Select Deviceを選択の後、Chromeを選択
image.png
image.png

その後、コマンドラインで flutter run
image.png

ブラウザデバッグ用のSDK等がDLされ、特に問題が無ければ下記のようにflutterを起動するブラウザを問うてくる(さっき選んだ気がするが、いつも聞かれる)
今回はchromeなので2を入力
image.png

何事もなければ勝手にブラウザが立ち上がり、flutter starterアプリが動くはず
image.png
(右下のフローティングボタンを押下することで数字がカウントアップされる)

(必要に応じて)プロキシ環境の場合はプロキシ設定を入れておく

Ctrl + , でSettingsを開き、右上のOpenSettings(JSON)を選択して下記のようにプロキシ設定を入れる(strictSSLオプション等はその環境に応じて)
image.png

Android Studio

開発はVSCodeで行うが、エミュレータの作成等はAndroidStudio側で行うのでインストール
特に開発環境に縛りが無いのであれば、Android Studio公式からDownloadボタンを押下でOK。

今回は過去バージョンを選んでDLする。(Android公式ページはenサイトじゃないと不都合が生じることがあるので注意)

  • Android Studio(英語サイト)にアクセス
  • 下の方のI Agree To The Termsをクリック
  • お好みのバージョンのAndroid StudioをDL。今回はKoalaのinstallerにした
    image.png

ダウンロードが完了したら、exeを実行してAndroid Studioをインストール
image.png

Android Virtual Deviceにチェック
image.png

インストール完了後、さらに別のウィザードが立ち上がるので進める
image.png

AndroidStudioを起動し、New Project
image.png

その後の選択は今回は重要ではないのでとりあえず進めていく
image.png

メイン画面が開いたら、左上メニュー-> Tools-> DeviceManager
image.png

DeviceManagerのプラスボタンを押下-> Create New Device を押下
image.png

お好みのデバイス設定をしていく
image.png

Androidエミュレータの作成が完了
image.png

ここで、一旦エミュレータの再生ボタンを押下。今回は下記のようなダイアログが出て素直に起動しなかったのでさらに進める
image.png
image.png

正常に起動したようだ
image.png

再び Visual Studio Codeに戻ってAndroidエミュレータ起動

VSCodeを開いたままの状態だった場合は、一旦クローズして再度オープン。管理者権限で起動しておく方が安心。

コマンドパレットから Flutter: Select Deviceで先ほどAndroid Studio側で作成したデバイスが表示されているはずなので選択(今回はPixel8を選択)
image.png

デバイス選択後、 flutter runコマンド実行
image.png

Androidエミュレータ上で先ほどのアプリが動いた！
image.png

Android Studioや、Android用のSDKダウンロードに時間がかかったけど、非プロキシ環境であれば比較的詰まることなく環境構築できた

プロキシ環境の場合はgradleでコケる可能性有りなので...

プロキシの設定と、証明書の取り込みが必要になる(かも)

プロキシ設定は、 %USERPROFILE%\.gradle\gradle.properties に下記のような設定を入れていけばOK

systemProp.http.proxyHost=
systemProp.http.proxyPort=
systemProp.http.proxyUser
systemProp.http.proxyPassword
systemProp.https.proxyHost ...

証明書起因でいまいち上手くいかない場合は、下記のようにkeytoolで証明書の取り込みを行う
下記フォルダにkeytool.exeがあると思うので、
C:\Program Files\Android\Android Studio\jbr\bin\

こんな感じ

cd C:\Program Files\Android\Android Studio\jbr\bin
keytool.exe -import -file "C:\path\to\my_ca_sha2.cer" -keystore C:\"Program Files"\Android\"Android Studio"\jbr\lib\security\cacerts

私の手元の環境だと、上記の2つの設定で無事プロキシ環境下でもflutter実行 on Androidエミュレータまで行うことができました

次回は、Flutter開発を行う上でよく使うプラグインを使いつつ、実際のコーディングに入っていきます
(次回記事)[https://qiita.com/hidepy/items/c3bd9ad767deb4117f7a]

1
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
Sign upLogin
1
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?