Flutter desktopプロジェクトを新規につくる、または既存のMobileプロジェクトに組み込む（いまだけ）

前準備

現状、Flutterのmaster channelでしか動かないみたいなので、切り替えておく。

$ flutter channel master
$ flutter upgrade

新規にインストールする場合は、GitHubから直接cloneも可。

$ git clone -b master https://github.com/flutter/flutter.git
$ export PATH="$PATH:`pwd`/flutter/bin"
$ flutter doctor

環境変数ENABLE_FLUTTER_DESKTOPをtrueに設定しておく。

export ENABLE_FLUTTER_DESKTOP=true

Flutter desktopプロジェクトを新規につくる場合は、flutter createで作成しておく。

$ flutter create --org com.your.flutter -i swift your_desktop_sample

Desktopハイブリット対応

flutter-desktop-embeddingプロジェクトのexampleから、

fonts/
linux/
macos/
windows/

のディレクトリを組み込み先のプロジェクト直下にコピーする。これらのボイラープレートは、いずれflutter createに吸収されるはず。fontは?

ちなみにウィンドウフレームのタイトルを変更したかったら、各プラットフォームディレクトリのソースやXIBファイルを"Flutter Desktop Example"でgrepして変更すればよい。

Desktopではいまのところシステム標準のフォントが使えないので、↑でバンドルしたfontを明示的に指定する。

pubspec.yaml

  # See https://github.com/flutter/flutter/wiki/Desktop-shells#fonts
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto/Roboto-Thin.ttf
          weight: 100
        - asset: fonts/Roboto/Roboto-Light.ttf
          weight: 300
        - asset: fonts/Roboto/Roboto-Regular.ttf
          weight: 400
        - asset: fonts/Roboto/Roboto-Medium.ttf
          weight: 500
        - asset: fonts/Roboto/Roboto-Bold.ttf
          weight: 700
        - asset: fonts/Roboto/Roboto-Black.ttf
          weight: 900

Desktopで起動した時、Target Platformが設定されておらず'Unknown platform'例外が起きてしまうので、debugDefaultTargetPlatformOverrideを上書きする必要がある。
TargetPlatformにはDesktopプラットホームがまだ用意されていないため、Desktopだけなら適当にTargetPlatform.fuchsiaを指定しておくのだが、それだとiOS/Androidビルドが動かなくなってしまうので、Desktopプラットホームのときだけ上書きさせるようにする。これもいずれは不要な手順だろう。

main.dart

import 'dart:io';

import 'package:flutter/foundation.dart'
    show debugDefaultTargetPlatformOverride;

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
  TargetPlatform targetPlatform;
  if (Platform.isMacOS) {
    targetPlatform = TargetPlatform.iOS;
  } else if (Platform.isLinux || Platform.isWindows) {
    targetPlatform = TargetPlatform.android;
  }
  if (targetPlatform != null) {
    debugDefaultTargetPlatformOverride = targetPlatform;
  }
}

void main() {
  _setTargetPlatformForDesktop(); // <--- Add here
  runApp(new MyApp());
}

実際に手を動かしてみると、いまだけ手順以外、ほぼ何もすることがないことに改めてびっくり。プラグインが追っ付け出揃えば、このままほとんど意識することなくハイブリット化できてしまうようになるのだろう。おそるべしFlutter。

試しにFlutterの画面遷移のサンプルアプリをハイブリット化してみました。ソースはここにあります。

参照

Install

Flutter build release channels

Desktop shells

Desktop Flutter Example

Desktop Embedding for Flutter

Get one more story in your member preview when you sign up. It’s free.