[Flutter] とにかく楽して安全にUbuntuに環境構築する

Set up the Flutter Flutter
Set up the Flutter

私は初めてFlutterの環境構築をする際に「いちから始めるFlutterモバイルアプリ開発」を参考にしました。1から10まで丁寧に図解付きで紹介されていて非常に!参考になる神資料でした!!特にWindowsとMac両方の環境構築方法が載っておりまさに私得です。
しかしLinuxの環境構築は載っていないのです!!!
ならば僭越ながら私が紹介させていただきます。WindowsやMacと比べると簡単ですし

WindowsやMacをお使いの方はこちらを参考にされることをおすすめします。
 ・環境構築(Mac編)
 ・環境構築(Windows編)

今回の目的はややこしい設定ファイルを弄ったりせず、インストールコマンドとGUIだけでAndroidビルド環境ができるところまでです!!
とにかく簡単に楽してミスなく環境を作って開発へのモチベーションを高めましょう🔥

使用環境紹介

2024年11月現在の私が使用する環境です。
本記事のインストールテスト用に仮想環境を使用していましたが、Androidエミュレータが動かないので後半はクリーンインストールしたUbuntuを使用しています。
どちらでも設定方法は変わりません!

インストール関連の章
ホストマシン : Windows10
仮想化ソフト : Oracle Virtual Box 7.1.4
仮想OS : Ubuntu 24.04

Androidエミュレータインストール以降の章
OS : Ubuntu22.04

※Virtual Boxで動かしているUbuntuではAndroidエミュレータが起動できません!
※クリーンインストールしたUbuntuを使用することをおすすめします。
※WindowsとUbuntuのデュアルブート環境でもOKです!

Flutter SDKのインストール

まずはパッケージ情報の更新から始めましょう!upgradeはご使用の環境に問題を起こす可能性があるため使用しなくても良いです。

sudo apt update
sudo apt upgrade

Flutterのインストールにはsnapを使用します。
snapはコンテナ技術がベースとなっているためインストールやアンインストールをしてもローカル環境へ影響しないので安心して利用できます。

sudo snap install flutter --classic

インストールが終わったらflutterの環境を確認できるdoctorコマンドを使用します。
また、flutter関連コマンドの初回実行は色々ダウンロードが始まると思いますので、焦ったり中断したりせずに気長に待ちましょう。
画像のような結果が出ればOKです!Android関連はまだインストールしてないので✘がついていますね。

flutter doctor

Android Studioのインストール

Android Studioをインストールすることでビルドツールやエミュレータなどをまとめて用意することができます。公式サイトからダウンロードしても良いのですが、バージョンの確認やインストール先フォルダの設定などが大変ですよね。
今回の目的は楽して安全にですのでコマンドを使って楽しましょう!
snapにまかせてしまうことで設定ミスや異なるパッケージをインストールしてしまうこともなくなります。

sudo snap install android-studio --classic

インストールが終わったらandroid-studioを起動してインストールします。

android-studio

使用データはDon’t sendで良いでしょう。

Install TypeはStandardにします。Customでも特に変更する場所はありませんでした。

ライセンス画面は右下の丸いボタンをAcceptにします。

ダウンロードが終わってFinishが出れば終了です。

Android Studioの設定

無事にAndroid Studioをインストールできましたので、ここからはAndroid Studioを使用して必要なツール等をインストールしていきます。

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

起動したら左の列からPluginを選択します。そうするとプラグイン選択画面が開くので、Flutterを検索してインストールします。

忘れずにRestart IDEを実行します。

Android SDK Command-line Toolsをインストールする

Android関連のプログラムをコマンドから実行するためのツールをインストールします。
起動時の画面からMoreActions → SDK Managerを起動します

SDK Managerが起動したら左列からAndroid SDKを選択します
右側の画面が切り替わったら SDK Tools → Android SDK Coomand-line Tools を選択します。
チェックが付いたらApplyを押してインストールします(OKでも良いです)
Confirm Changeの画面が出たらそれもOKを押してください。

Finishが出れば終了です。

Android Licencesを設定する

ここまで進めて再度flutter doctorを実行するとこのような画面になると思います。
[!] となっているのはライセンスを認証していないからのようです。表示されているコマンドを実行してライセンス認証をはじめましょう!

flutter doctor --android-licenses

するとこのような画面が出てきますので、 y キーを押して確認します。

長い文章が5,6ページぐらい出てくるのでそのたびに確認して y キーを押して進めていきます。

「All SDK package licenses accepted」が表示されれば終了です。

flutter doctorコマンドを再度実行したら無事に認証されてますね!

以上でFlutterのビルド環境をUbuntu上に構築できました!
次回はVSCodeと合わせてコンパイルをしてAndroidエミュレータ上で動かしてみましょう!!

追加要素

Chromeをインストールする

flutter doctorのたびにChromeが[✘]であることが気になった方も多いでしょうか?
こちらはFlutter Webを使うための設定で、Google Chromeをインストールすれば[✔]になるので各自インストールしてください。
Firefoxなどを使って公式サイトからダウンロードされるのが一般的でしょうが、せっかくですのでコマンドからインストールする方法をご紹介します。
もしかしたらこの記事をご覧になられている頃には配布URLが変更されてインストールできなくなっているかもしれません🙇

sudo apt install wget
cd ~/Downloads
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb

インストール後にflutter doctorを実行すると全てOKになりました!
[✔]が並んでいると気持ち良いですね!!!

Android エミュレータをインストールする

序盤の環境紹介にも記述しましたが、この章と最後の実行の章はクリーンインストールしたUbuntuで実行していますm(_ _)m
まずはAndroid Studioを起動して左のメニューから Project を選びます。
その後、More Actions → Virtual Device Managerを起動します。

おそらく何もインストールされていないので、左上の +ボタンから追加します。

デバイスリストが表示されますので Play Storeマークがついたデバイスを選択してください。

次はAndroidのイメージを選択します。Intelなど一般的なCPUを使われている方は上のタブからx86 Imagesを選択します。
リストの中から右列のTargetが(Google Play)になっているものを選びます。
インストールするイメージが決まったらRelease Nameの右にある矢印マークからイメージをダウンロードします。

1.5GB前後あるのでダウンロードに時間がかかると思います。終わればFinishを押します。

先程の画面に戻るとダウンロードの矢印ボタンが消えていると思います。そうしたら右下のNextボタンで次に進みます。

エミュレータ名の変更などができます。基本的には何も変更せずにFinishで良いでしょう。

無事に追加されました!右側の▷ボタンからAndroidエミュレータを起動できます。

起動しました!

サンプルプログラムを実行する

Flutterはプロジェクトを新規作成するとサンプルプログラムが最初から用意されています。
今回はそのサンプルプログラムでビルドと実行テストをしてみます。
先程のAndroidエミュレータを起動した状態で、ターミナルから以下のコマンドを実行します。

flutter create test_project
cd test_project
flutter run -d emulator-5554

flutter create → 新規プロジェクトを作るコマンド
flutter run -d emulator-5554 → デバッグモードでビルドをしてAndroidエミュレータで実行するコマンド
初回ビルドは時間がかかると思うので気長に待ちましょう。

ビルドが全く終わらない場合は ctrl+c などで中断して以下のコマンドを実行してください。

flutter clean
flutter run -d emulator-5554

無事に起動しました!
長々とお付き合いくださりありがとうございました。
それではみなさん良いFlutterライフを!!!

この記事が役に立ちましたらぜひ左下のGoodボタンをお願いします!
皆様のGoodが執筆の励みになります。

コメント

タイトルとURLをコピーしました