How to run Flutter apps on Fuchsia OS

Kurun

5 min readMay 21, 2020

Introduction

This article summarizes how to run sample Flutter apps on Fuchsia OS.
Fuchsia OS上で動くサンプルFlutterアプリの動かし方についてまとめています。

Preparation

Flutterアプリを動かすには、前提としてグラフィックスが動作する実機環境が必要です。QEMUやFEMUはVulkanをサポートしていない為、動作確認が出来ません。

実機でFuchsia動かす手順については以下の記事を参照してください。

Running Flutter Apps in Fuchsia OS on NUC7 platform

IntelのWindows 10搭載のMini-PCである NUC7 (x64) 上で、Fuchsia OS を動かし、さらにその環境で Flutterアプリを動かしてみました。

medium.com

Build Flutter app

サンプルとして2種類のアプリをgithubに用意しましたので、それを動かす手順を紹介していきます。

$ cd src/experiences/benchmarks/bin
$ git clone https://github.com/Kurun-pan/fuchsia-flutter-helloworld.git flutter_helloworld
$ git clone https://github.com/Kurun-pan/fuchsia-flutter-tetris.git flutter_tetris

Modify build/BUILD.gn file

Flutterアプリをビルドスクリプトに組み込んでいきます。まず、ハイライトした部分を既存ファイルに追加します。

Modify topaz/BUILD.gn

topazディレクトリ直下のBUILD.gnファイルを修正します。ハイライトした部分を既存ファイルに追加します。

Create new directories and files

面倒ですが、 topazのディレクトリ以下にディレクトリとBUILD.gnファイルを作成します。

$ mkdir topaz/examples/ui/flutter_helloworld/
$ touch topaz/examples/ui/flutter_helloworld/BUILD.gn$ mkdir topaz/examples/ui/flutter_tetris/
$ touch topaz/examples/ui/flutter_tetris/BUILD.gn

Modify topaz/examples/ui/flutter_helloworld/BUILD.gn

以下の内容を記述します。

Modify topaz/examples/ui/flutter_tetris/BUILD.gn

以下の内容を記述します。

Build

追加したFlutterアプリをビルドします。Host PCで以下のコマンドを実行します。

$ fx build

Running Flutter app

Fuchsia OSが起動し終わったら、実機環境のシェルもしくは、fx shellコマンドを利用して以下を実行します。

$ present_view fuchsia-pkg://fuchsia.com/fonts#meta/fonts.cmx &

Hello, World app

$ present_view present_view fuchsia-pkg://fuchsia.com/flutter_helloworld#meta/flutter_helloworld.cmx

Tetris app

$ present_view fuchsia-pkg://fuchsia.com/flutter_tetris#meta/flutter_tetris.cmx

Issue

課題があって、Material Iconを正常に表示させることが出来ていません…