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