1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

個人的なまとめAdvent Calendar 2023

Day 8

FlutterをUTM上のDebianで動かしてみた

Last updated at Posted at 2023-12-07

はじめに

この記事は、Qiita Advent Calendar 8日目の記事です。
以下の記事より、すべての記事をご覧になれます。

筆者について

  • 現在高校2年生
  • 水泳部マネージャー
  • 生徒会長
  • とある団体の代表

本編

## 経緯

Flutterでの開発をずっとしてみたいと思っていて、最近開発を仮定しているSOKFIもモバイル向けネイティブアプリをFlutterで書こうと思っています。しかし、クロスプラットフォームがFlutterのいいところ、せっかくならパソコン向けにもアプリを出したいと考えていました。そこで、僕が大好きなLinuxに対応させることにしたのです。

環境づくり

さて、環境は以下の通りにしました。

  • Host:Macbook Air (M1)
  • Guest:Debian
  • VM:UTM(QEMU)

以下、自分自身が忘れないためにも設定を記述していきます。

①Debianイメージのダウンロード

以下のページよりDebianのISOをダウンロードしましょう。以下のページにアクセスして「arm64」をクリックすると自動敵にダウンロードが始まります。

Screenshot 2023-12-07 at 10.11.08.png

②UTMにVMを作成する

まず、UTMをインストールしてない方はUTMをインストールしてください。

shell
# Homebrewをインストールしてない方はすると便利です。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# UTMのインストール
brew install --cask utm

それぞれ下にリンクを置いておきます。

インストールが終わり次第、VMの作成に移ります。

プラスマークを押して〜

Screenshot 2023-12-07 at 10.17.37.png

Linuxを選択して〜

Screenshot 2023-12-07 at 10.18.28.png

Virtualizeを選択して〜

Screenshot 2023-12-07 at 10.18.23.png

Boot ISO Imageで先ほどダウンロードしたISOを選択して〜

Screenshot 2023-12-07 at 10.18.56.png

ここから先も好きなだけ設定して〜(メモリは4GB分ぐらいあったほうがいいとは思います。8GBしかない人は頑張ってください。)

Screenshot 2023-12-07 at 10.20.03.png

Screenshot 2023-12-07 at 10.20.08.png

Screenshot 2023-12-07 at 10.20.17.png

Screenshot 2023-12-07 at 10.20.27.png

それでは、スタートボタンよりいざブートです!

Screenshot 2023-12-07 at 10.20.32.png

Screenshot 2023-12-07 at 10.20.44.png

こっから先は好きな設定にしてください。たとえば、キーボードなんかは、僕のMacはUS配列なので米国を選択しています。

Screenshot 2023-12-07 at 10.20.57.png

Screenshot 2023-12-07 at 10.21.22.png

Screenshot 2023-12-07 at 10.21.41.png

Screenshot 2023-12-07 at 10.22.12.png

Screenshot 2023-12-07 at 10.22.24.png

Screenshot 2023-12-07 at 10.22.29.png

Screenshot 2023-12-07 at 10.22.40.png

Screenshot 2023-12-07 at 10.22.45.png

Screenshot 2023-12-07 at 10.22.51.png

ここで、ディスクの設定ですが、すべてパーティションは削除してください。ここから先に個人用のフォルダのパーティションを分割するとかいうとこもでてきますが、基本的のそのような設定は不必要だとお思います。(あくまで検証用なので)

Screenshot 2023-12-07 at 10.23.06.png

Screenshot 2023-12-07 at 10.23.13.png

Screenshot 2023-12-07 at 10.23.19.png

Screenshot 2023-12-07 at 10.23.23.png

Screenshot 2023-12-07 at 10.23.33.png

Screenshot 2023-12-07 at 10.24.52.png

ここから先はかなりファイルのダウンロードをするので、テザリングとかの人は気をつけてください。

Screenshot 2023-12-07 at 10.24.59.png

Screenshot 2023-12-07 at 10.25.02.png

Screenshot 2023-12-07 at 10.25.05.png

Screenshot 2023-12-07 at 10.25.46.png

Screenshot 2023-12-07 at 10.38.42.png

ということでここまで来たらインストールは完了です!一旦続けるを押して再起動が終わったとあとにシャットダウンしてください。
ディスクを取り出して、もう一度起動しましょう!

Screenshot 2023-12-07 at 10.40.12.png

ログインして以下のような画面が出てきたら成功です。おめでとうございます!

Screenshot 2023-12-07 at 10.51.54.png

ではここからは個人が設定しやすい設定をしてください。(ZSHに変更、VSCodeのインストール等々…。)

Flutter (Arm)をインストール

基本は以下の記事に従ってインストールさせていただきました

shell
git clone https://github.com/flutter/flutter
sudo mv flutter /opt/

#以下は~/.zshrcまたは~/.bashrcなどに記述
export PATH=$PATH:/opt/flutter/bin

#ここで自動的にFlutterのインストールが始まります
flutter doctor

#もし成功すれば以下のような画面が出てきます
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.18.0-7.0.pre.14, on Debian GNU/Linux 12
    (bookworm) 6.1.0-12-arm64, locale ja_JP.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Chrome - develop for the web (Cannot find Chrome executable at
    google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] VS Code (version 1.83.0-insider)
[✓] Connected device (1 available)
[✓] Network resources

! Doctor found issues in 3 categories.

それでは、お試しアプリ作って起動しましょう。

shell
flutter create sample; cd sample
flutter run

必要なコンポーネントがインストールされた後に、アプリがビルドされて起動されます。
例のカウンターアプリが起動されたらOKです。

Screenshot 2023-12-07 at 11.02.53.png

最後に

今回はFlutterをArmのDebian上で動かしてみました。ちなみに、Armはもとより、Linux上でサポートされてないライブラリって結構多いので、きちんと対応しているかについて調べ手から使うことをお勧めします。ということで、以上今日はいつもとは少し違う記事でした。それではは、引き続き今後のアドカレ 23 の記事をお楽しみにしてください。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?