Zenn
🧖

Steam Deck上でFlutterによるアプリ開発できるかやってみた

2022/12/18に公開
Flutter
Linux
Steam Deck
tech

はじめに

みなさん Steam Deck は届きましたか？
Hello Steam Deck
DJ モルカーも喜んでいます。
Hello Steam Deck

ご存知の通り Steam Deck はゲーム機ではありますが、自由度が非常に高く、Linux マシンとしても使える代物となっています
参考: Steam Deck は携帯ゲーム機と PC のハイブリッド？ わかりやすい OS と圧倒的なカスタマイズの自由度について

Linux マシンということはアプリケーションなどの開発にも使えるのでしょうか？
今回は Flutter を用いて Linux アプリがビルドできるのかやってみましょう

環境

Steam Deck には Bluetooth が搭載されていますので、適当なキーボードとマウスを繋いでおきましょう。
無くてもできなくはないですが、バーチャルキーボードでのタイピングはかなり厳しいです。
keyboard and mouse

手順

ssh

実機の画面は小さいので、色々コマンド打ったりは大変です。
まずは ssh で接続できるようにしていきましょう。

そもそもパスワードが設定されていないので、passwdコマンドで設定します。
参考: Steam サポート :: Steam Deck デスクトップに関する FAQ

sshd を有効にして

# これは実機のKonsoleで頑張りましょう
sudo systemctl start sshd
sudo systemctl enable sshd

sshd が有効になれば ssh コマンドで接続できます。

ssh deck@steamdeck.local

ホスト名は設定から変えられるので、もし変えていた場合は適時読み替えてください。
私の環境ではKsSteamDeckとしているので、ssh deck@KsSteamDeck.localでした。
host name

Flutter のインストール

Flutter 公式の手順に従ってインストールしても問題ないと思いますが、パスを通したりなんだかんだ面倒なので今回は fvm を使っていきます。

まずは Homebrew を入れて、

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

参考: macOS（または Linux）用パッケージマネージャー — Homebrew

tap して install

brew tap leoafarias/fvm
brew install fvm

参考: Installation | Flutter Version Management

stable をインストールして、パスを通します。

fvm install stable

echo 'export PATH="$PATH:$HOME/fvm/default/bin"' >> ~/.bash_profile
echo 'export PATH="$PATH:$HOME/fvm/default/bin/cache/dart-sdk/bin"' >> ~/.bash_profile
echo 'export PATH="$PATH:$HOME/.pub-cache/bin"' >> ~/.bash_profile

簡単ですね。

(deck@KsSteamDeck ~)$ flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (2 days ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0

doctor してみましょう。

(deck@KsSteamDeck ~)$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on SteamOS 5.13.0-valve21.3-1-neptune, locale en_US.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
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from https://github.com/ninja-build/ninja/releases
[!] Android Studio (not installed)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

! Doctor found issues in 4 categories.

色々問題が出てますが、今回は Linux のアプリケーションがビルドできることを目標とします。

Flutter run

ビルドするものが無いと話にならないので、適当なプロジェクトを作成します。

適当なディレクトリを作って、flutter create しましょう。
今回はホームディレクトリにDevelopというディレクトリを作って、その中で作業しています。

(deck@KsSteamDeck Develop)$ flutter create --platforms linux hello_steam_deck
Creating project hello_steam_deck...
Running "flutter pub get" in hello_steam_deck...                    3.2s
Wrote 18 files.

All done!
In order to run your application, type:

  $ cd hello_steam_deck
  $ flutter run

Your application code is in hello_steam_deck/lib/main.dart.

早速 flutter run してみましょう。

(deck@KsSteamDeck hello_steam_deck)$ flutter run
Downloading linux-x64/linux-x64-flutter-gtk tools...               14.3s
Downloading linux-x64-profile/linux-x64-flutter-gtk tools...      1,194ms
Downloading linux-x64-release/linux-x64-flutter-gtk tools...        764ms
Launching lib/main.dart on Linux in debug mode...
CMake Error in CMakeLists.txt:
  Imported target "PkgConfig::GTK" includes non-existent path

    "/usr/include/gtk-3.0"

  in its INTERFACE_INCLUDE_DIRECTORIES.  Possible reasons include:

  * The path was deleted, renamed, or moved to another location.

  * An install or uninstall procedure did not complete successfully.

  * The installation package was faulty and references files it does not
  provide.



CMake Generate step failed.  Build files cannot be regenerated correctly.
Building Linux application...
Exception: Unable to generate build files

環境が違う関係で、もしかしたらエラー内容が違うかもしれませんが、とにかくエラーでビルドできないはずです。

どうやら Steam Deck は Arch Linux ではありますが、カスタムされている関係で色々標準ライブラリやパッケージが削除されているようです。
参考: For compiling C++ code : SteamDeck

pacman

pacman で必要なものをインストールしていきます。

まず pacman を使うためにロックを解除します。

sudo steamos-readonly disable

参考: Steam サポート :: Steam Deck デスクトップに関する FAQ

そしておまじないを発動します。

sudo pacman -S base-devel cmake ninja glibc linux-api-headers gtk3 pango glib2 sysprof harfbuzz freetype2 libpng util-linux fribidi cairo lzo pixman gdk-pixbuf2 libcloudproviders atk at-spi2-atk dbus at-spi2-core libx11 xorgproto

何をしているかと言うと、前述したように Steam Deck のカスタムされた Arch Linux は、標準ライブラリなど諸々が削除されているため、ビルドに必要なものが不足しています。
そこでこのおまじないで不足しているものをインストールしています。

How to make おまじない

おまじないはflutter runした際の CMake のエラーから作られています。

例えばこのようなエラーの場合、at-spi-2.0がうんたら言われてるので、sudo pacman -S at-spi2-coreだなといった具合です。
これをエラーが無くなるまでまごころ込めて作り上げています。
もっといいやり方はありそうですが、よく分かりません...

(deck@KsSteamDeck hello_steam_deck)$ flutter clean && flutter run
Deleting build...                                                    6ms
Deleting .dart_tool...                                               0ms
Deleting ephemeral...                                                0ms
Running "flutter pub get" in hello_steam_deck...                   558ms
Launching lib/main.dart on Linux in debug mode...
CMake Error in CMakeLists.txt:
  Imported target "PkgConfig::GTK" includes non-existent path

    "/usr/include/at-spi-2.0"

  in its INTERFACE_INCLUDE_DIRECTORIES.  Possible reasons include:

  * The path was deleted, renamed, or moved to another location.

  * An install or uninstall procedure did not complete successfully.

  * The installation package was faulty and references files it does not
  provide.

CMake Generate step failed.  Build files cannot be regenerated correctly.
Building Linux application...
^C

いざ run

ssh 越しだとディスプレイが開けないとかでエラーになるので、実機でflutter runしましょう。

(deck@KsSteamDeck hello_steam_deck)$ flutter clean && flutter run
Deleting build...                                                   11ms
Deleting .dart_tool...                                               4ms
Deleting ephemeral...                                                5ms
Running "flutter pub get" in hello_steam_deck...                   563ms
Launching lib/main.dart on Linux in debug mode...
Building Linux application...

(hello_steam_deck:38649): Gtk-WARNING **: 20:17:49.417: cannot open display:
Error waiting for a debug connection: The log reader stopped unexpectedly, or never started.
Error launching application on Linux.

動きました！
DJ モルカー「PUI PUI!!!」
flutter run

Flutter gallery もやってみましょう

git clone https://github.com/flutter/gallery.git
cd gallery

# galleryはmasterを対象にしているので切り替えます
# https://github.com/flutter/gallery#flutter-master-channel
fvm use master
fvm flutter build linux --release

いざ

# 実機のKonsoleで
cd ~/Develop/gallery/build/linux/x64/release/bundle
./flutter_gallery

gallery
gallery

おわりに

今回は Flutter でのアプリ開発が Steam Deck でも出来ることが確認できました。
環境構築が面倒でしたが、もしかしたら Docker を使えばもっと簡単に環境構築できるかもしれません。

また、今回は Linux アプリを対象にしていましたが、おそらく Android や Web もビルド可能だと思いますし、VS Code も Linux バージョンが存在するので、実用的な開発環境が作れるんじゃないかと期待できます。

それでは良い Steam Deck ライフを。
DJ and Steam Deck

GitHubで編集を提案

Discussion