Help us understand the problem. What is going on with this article?

Flutter デスクトップアプリ環境構築 for Linux

Flutterで書いたアプリケーションをデスクトップ環境でも動かせるようにする、Flutter desktop embeddingをUbuntu 18.04環境で試してみたので、その手順をまとめておきます。

macOS環境の場合はこちら

環境構築の手順

Flutter SDKインストール

リポジトリからcloneした後は、適当なパスに配置して、パスを通しておきます。

$ git clone https://github.com/flutter/flutter
$ sudo mv flutter /usr/local/
$ export PATH=$PATH:/usr/local/flutter/bin

Android Studioインストール

https://developer.android.com/studioからLinux版をダウンロードして適当な場所に置いて、インストールスクリプトを叩きます。

Android Studioのインストールで基本的には次へを押していく感じです。

$ wget https://dl.google.com/dl/android/studio/ide-zips/3.5.3.0/android-studio-ide-191.6010548-linux.tar.gz
$ sudo tar -xzvf android-studio-ide-191.6010548-linux.tar.gz -C /usr/local/
$ /usr/local/android-studio/bin/studio.sh でAndroid Studioをセットアップ

その他のインストール

サンプル実行(flutter run)時に必要になるので、clang++をインストールしておきます。

$ sudo apt install clang

また、flutter configコマンド内部でcurlを利用している様子のため、こちらもインストールが必要です。

$ sudo apt install curl

Flutterセットアップ

ターゲット環境をHost PC (Ubuntu) にする設定を行います。参考

$ flutter config --enable-linux-desktop

しばらく時間がかかりますが、そのまま待ちましょう。

ここまでの状況の確認

以下のコマンドを使うと、flutterを動かすためのインストール状況を診断してくれます。今回はサンプルを動かせればいいので、以下の状態でも大丈夫です。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.12.3-pre.49, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.40.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Proxy Configuration
    ! NO_PROXY does not contain 127.0.0.1
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

サンプルを実行してみる

flutter-desktop-embedding取得

$ git clone https://github.com/google/flutter-desktop-embedding.git

実行

$ cd flutter-desktop-embedding/example
$ flutter run

もしくは、ビルドのみ行いたい場合は以下のコマンドを実行します。

$ flutter build linux

なお、makeコマンドを直接実行しても大丈夫です。

make -C linux

コマンド実行後、エラー等がなければbuild/linux/debug/flutter_desktop_exampleに実行バイナリが作成されているため、これを実行するとアプリケーションが立ち上がります。

$ build/linux/debug/flutter_desktop_example

Screenshot from 2019-12-08 08-14-10.png

ソースコード

Dartのソースコードは./lib/main.dartです。

プラグインの動作確認

用意されているプラグインを使ったテスト済みのサンプルがtestbedディレクトリにあります。これを同様にflutter runで動かしてみると、普通に動きました。

このサンプルのMakefileなどを参考にして、プラグイン追加したら良いと思います。

Screenshot from 2019-12-09 04-04-32.png

プラグインの追加方法

Linuxの場合、pubspec.yamlへの記述以外にもMakefileの手動修正が必要です(macOSの場合はpubspec.yamlだけでOK)。

pubspec.yamlを更新後は、以下のコマンドを実行して関連ファイルを更新する必要があります。

$ flutter packages pub get
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした