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](https://github.com/google/flutter-desktop-embedding)プロジェクトのexampleから、

```
fonts/
linux/
macos/
windows/
```

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

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

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

```yaml: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プラットホームのときだけ上書きさせるようにする。これもいずれは不要な手順だろう。

```dart: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の画面遷移](https://qiita.com/tatsu/items/38cd85efd93005b95af9)のサンプルアプリをハイブリット化してみました。ソースは[ここ](https://github.com/tatsu/libraries_in_japan/tree/desktop-embedding)にあります。

![Screen Shot 2019-06-30 at 21.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49088/9e4656ca-927b-4f10-b4a7-f3490ccd2640.png)

![Screen Shot 2019-06-30 at 21.01.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49088/53ba4850-a1b7-1e75-501f-8fc08d6026fc.png)

#参照

[Install](https://flutter.dev/docs/get-started/install)

[Flutter build release channels](https://github.com/flutter/flutter/wiki/Flutter-build-release-channels#how-to-change-channels)

[Desktop shells](https://github.com/flutter/flutter/wiki/Desktop-shells)

[Desktop Flutter Example](https://github.com/google/flutter-desktop-embedding/tree/master/example)

[Desktop Embedding for Flutter](https://github.com/google/flutter-desktop-embedding/blob/master/README.md)

[Get one more story in your member preview when you sign up. It’s free.](https://medium.com/flutter-community/flutter-for-desktop-create-and-run-a-desktop-application-ebeb1604f1e0)