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

[Flutter][macOS] Flutter desktop embedding環境構築

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

Linux環境の場合はこちら

環境構築の手順

Flutter SDKインストール

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

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

Android Studioインストール

すでにAndroid Studioをインストール済みの場合はスキップして下さい。

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

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

Xcodeのインストール

ビルドにXcodeが必要なるため、ストアからインストールしてください。

Flutterセットアップ

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

$ flutter config --enable-macos-desktop

cocoapodsのインストール

cocoapodsはサンプルをビルドして動かすだけなら不要ですが、プラグインを追加してアプリを作成していくためには必須で必要です。

$ sudo gem install cocoapods

ここまでの状況の確認

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

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.13.1-pre.58, on Mac OS X 10.15.1 19B88, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[!] 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.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

サンプルを実行してみる

flutter-desktop-embedding取得

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

実行

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

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

$ flutter build macOS

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

make -C macOS

スクリーンショット 2019-12-07 12.17.26.png

ソースコード

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

プラグインの動作確認

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

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

ダークモードも対応してそうです↓

スクリーンショット 2019-12-09 20.57.09.png

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