Dart : Webdev と Flutter を ごった煮で開発する方法

Dart を用いることで、Html5 のフロントエンドや、サーバサイド、スマートフォン用のアプリを開発することができます。

一つのProjectで、これらの開発をするにはどうすれば良いでしょうか?
色々試してみて、今落ち着いた方法について書いてみます。

Webdev と Flutter は、 混合できない

pubspec.yaml に、 flutter と webdev のプロジェクトを一緒書くことができません。

pub get
pub run build_runner serve
とすると、 Flutter Project には使えないよと注意されます。

※ 2015年の頃はできました。
※ サーバーサイドとは、一緒に書くことができる。

例えば以下のような感じに書いても使えません。

name: hello
description: A new Flutter project.

web:
  compiler:
    debug: dartdevc

flutter:
  uses-material-design: true

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: any
  build_web_compilers: any

environment:
  sdk: '>=2.0.0-dev.48 <2.0.0'

とてもメンドくさい

一つのProject に書けないのは、とても面倒くさいです。

例えば、 umiuni2d という package を作ることして、
umiumi2dには、 サブプロジェクトとして、
umiuni2d_sprite, umiuni2d_audio, umiuni2d_httprequest, umiuni2d_io とあるとします。

それぞれ、 「共通のInterface」、「flutter」、「html5」 と用意すると、
これだけで、24個の github repogitory ができてしまいます。
https://github.com/kyorohiro/umiuni2d

例えば、IntelliJ で開発すると、
一つのPackage を開発するのに、
共通用、 Flutte用、 Webdev 用の 3つのProject を開きながら開発することになります。

大変!! 重い!! 面倒!!

※ DartEditor の時は、 　複数Project でも、快適に一つの画面で管理できてましたね。

アプリ側は楽をしよう

ライブラリー側は仕方がないので、 アプリ本体は、楽をしようとして、以下のような感じに落ち着きました。

pubspec.yaml を二つ用意する

Webよう

name: hello
description: A new Flutter project.

web:
  compiler:
    debug: dartdevc
dependencies:
  cupertino_icons: ^0.1.0

dev_dependencies:
  build_runner: any
  build_web_compilers: any


environment:
  sdk: '>=2.0.0-dev.48 <2.0.0'

Flutterよう

name: hello
description: A new Flutter project.

flutter:
  uses-material-design: true
  assets: 
     - web/assets/font_a.json 
     - web/assets/font_a.png 

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

environment:
  sdk: '>=2.0.0-dev.48 <2.0.0'

動作確認するときに、使用するpubspec.yamlを切り替える。
すると、

• web/ 配下のassetsをおくことで、リソースを共通化できます!!
• IDEのリファクタ機能でWebdev to Flutter のコードを同時にリファクタリングできます。

と良いことだらけ

おわり

他にも方法があるけど..
こんな感じです。

Ref

今回のサンプル
https://github.com/kyorohiro/gottani_project_dart_flutter_webdev

作成中のFlutter と Html5 共用のゲームライブラリーのサンプル
https://github.com/kyorohiro/umiuni2d_sprite_example