Flutter生活2日目~Flutter Meetup Tokyo編~

## 2日目
昨日はサンプルプロジェクトの確認まで完了しました。

今日は「よっしゃ！何か作るぞ！」と思ったのですが、ちょうど良いことに[Flutter Meetup Tokyo #13](https://flutter-jp.connpass.com/event/155559/)が開催されるようです！

> Flutter Meetup Tokyoは東京で開催するFlutter勉強会です。
> 内容はFlutterにまつわることであればなんでもOKです。
> 初心者の方もガチ勢の方も大歓迎です！ぜひぜひ奮ってご参加ください！

これは行くしかない！先輩方にいっぱいお話をお聞きするぞ！ということで、早速ブログ枠を頂戴して行くことにしました！

## LT
### Supernova StudioでFlutter爆速開発の夢を見れるか？ (@motoy3d)
- Supernova Studioとは？
  - 「Design to code. Meet SuperNova.」
  - https://supernova.io/
  - SketchやAdobe XDのデザインファイルをインポートすると、プラットフォームごとにコードを生成してくれる。
    - Flutterをサポートしてくれて、最近のアップデートが熱い！
    - macにSketchやXDがインストールされていなくてもOKc
- デモ
  - 起動も変換もかなり速い。
  - リアルタイムプレビューが便利そう。
  - 画面遷移の設定もいける。
    - 画像をボタンに変換する。
    - 数回の操作で画面遷移のイベントが設定できる。
    - 画面のリストを見ると、矢印が付いていて画面遷移図っぽくなる。(StoryBoardをいじっているイメージ)
  - エクスポートはちょっと遅め。
- エクスポートしたものをFlutterで読み込むと大概エラーが起きる。
  - 公式サンプルでもエラーがでる。
  - Flutterのエンジニア募集中だから近々解消するかも？
- 問題点
  - 古いXDやSketchは未対応
    - 最新版にすればOK
  - 読み込まれない画像ある。
    - 何回か読み込み直すといける。
  - レイアウトよく崩れる
    - 頑張って直す。
  - FlutterエクスポートするとTextクラスでエラー
    - 置換すればOK
- 結論
  - 爆速開発の夢は12/10現在ではまだ難しい。
  - 開発が活発なので、近い将来期待ができそう。(今夜かもしれない！)
- スライドのURL
  - https://speakerdeck.com/motoy3d/supernova-studio-and-flutter-ultra-speed-development

---
### Flutterプラグインでdart:ffiを使ってみる (@espresso3389)
- dart:ffiって何？
  - Wikipedia(https://ja.wikipedia.org/wiki/Foreign_function_interface)
  - ざっくり言うとC言語を呼び出す機能
    - ポインタから直接読み書きできる。(逆に言うとDartで作ったListとかを直接渡せない)
- 使ってみる。
  - テンプレ作成
    - flutter create -t plugin hello_ffi
  - コードいじる
    - ios_Classes/hello.cpp(追加)
      - iOSにあるけど、Androidも同じファイル使う。
    - lib/hello.ffi.dart
      - hello.cppの関数実装をDartに引き込む
  - Androidのgradleなど修正
    - android/CMakeLists.txtを修正
    - android/build.gradleを修正
  - 上記までやれば使う側はDartの関数みたいに使用できる。
- なぜAndroidがiOS側のファイルを読み込むようにしているのか？
  - XCodeは配下のファイルしか読み込めない。
  - CMakeは柔軟に対応できるのでAndroid側で九州
- 良さげなところ
  - C/C++のシングルソースで開発できる！
- サンプル
  - dart-lang/samples/ffiで学べる。
    - https://github.com/dart-lang/sdk/tree/master/samples/ffi
- ffi パッケージ
  - dart:ffiで不足している機能を提供
- 具体的な書き方はスライドでチェック！！(速すぎて追いつきませんでした。)
- まとめ
  - ポイントで基本何でもできる。
  - 構造体きつい。
  - メモリの確保/文字列変換系はffi使う。
- スライドのURL
  - 公開され次第反映します！！

---
### Flutter desktop embedding for Linux (@kurun_pan)
- Flutter desktop embedding概要
  - Flutterのデスクトップアプリが作れる。(Windows/Linux/Mac)
- 現状の共有
  - https://github.com/google/flutter-desktop-embedding
  - 不安定でまだプロダクトに使えないと書いてある。
  - Mac以外はデバッグモードでしか動かない。
  - プラグインを使うにはLinux/Macでは修正するものあり
    - Makefile
- 動かしてみた
  - macでもlinuxでも割と普通に動いている。(ダークモードも)
- FlutterアプリがLinuxで動く仕組み
  - 詳しくはスライドを参照！
  - プラグインはGTKを呼び出しているラッパーに過ぎない。
- まとめ
  - 割と普通に動く
  - まだ製品として使うのはちょっと...
    - プラグイン少なすぎ
  - Linuxネイティブの仕組みはシンプルなので今後に期待
    - コントリビュートするチャンスもありそう。
- スライドのURL
  - 公開され次第反映します！！

---
### Desktop向け業務アプリでFlutterを採用しようとした話 (@mirock)
- 「このWebアプリをオンプレかつ通信なしでDeskTopアプリにしてくれない？」
  - C/C++の呼び出しはない
  - クロスプラットフォーム
    - ElectronとFlutterくらいしかなさそう。
      - Electron
        - Webリソースなのでこちらが採用された。
      - Flutter
        - 現状使えなさそうなので採用はできなかった。
- Flutterの魅力
  - 美しいマテリアルなUI
  - ホットリロード
- プラグイン
  - 対応しているプラグインが少ない...。(拡張は可能)
- DeskTopに必要そうな機能(Macのみ検証した)
  - キーボード入力
    - テキストボックスも対応できる。
  - メニューバー
    - Windowsは対応できない。
  - データ永続化
    - MacOSのみ
  - ネットワーク接続
    - Macだとセキュリティの設定が必要(パーミッション？)
  - ファイル選択
    - WindowsとMacのみ
    - Macだとセキュリティの設定が必要(パーミッション？)
- まとめ
  - MacのAPIはかなり安定している(全然クラッシュしなかった)
  - WindowsとLinuxはちょっと厳しい
    - 今後対応されるAPIが差し変わる可能性あり(Win32→UWP)
- スライドのURL
  - 公開され次第反映します！！

---
### アプリ名を変更するプラグインを作った話 (@moyashidaisuke )
- アプリの名前のプラグインを作ってみた！
  - チュートリアルやったぞ！
  - 何か作るぞ！
  - アプリ名とかアイコン
    - AndroidManifest/Plistの直接書き換えしかなかった！不便！
  - ブログもある。
    - https://www.moyashidaisuke.com/entry/create-flutter-launcher-name
- プラグインの作り方
  - アプリとアイコンについては公式通りにやればOK
  - コードの書き方は似ているプラグインを参考にした。
  - 一度公開すると削除できないので慎重に！
  - 英語は頑張る！
- 公開した後の感想
  - どのくらい使っているのかわからない。
  - 宣伝しないと誰も使わない。(そもそも気づかない。)
  - 継続的に変更するところでもないから、直接書き換える勢が多いのかも。
  - みなさんぜひ使ってください！
- まとめ
  - 簡単なものでも意外と本体にない
    - コントリビュートのチャンス！
  - PRやいいねお願いします！
- スライドのURL
  - https://www.slideshare.net/moyashidaisuke/20191210-flutter-meetup-203989753

---
### Atomic DesignをFlutterでやってみた ([つっちー](https://connpass.com/user/ytsuchiyahrnd/) )
- Atomic Design
  - Widgetの切り分けの1つで、Widgetを再利用しやすく作れる。
  - [アトミックデザイン](https://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/)
- BLOCの設計
  -
- まとめ
  - FlutterのいいところはUIが簡単に素早く作れる
  - 高度に抽象化されたものより単純で冗長な方が良い
  - Organismsレベルでは再利用できた方が良いかも。
- まとめ
  - Atomic DesignでWidgetは再利用できるように作れる。
  - 再利用性を高すぎるとFlutterの良さがへる。
- スライドのURL
  - 公開され次第反映します！！

---
### そのアプリ…文字サイズをデカくしてもUI崩れないですか？ (Masaokb)
- Flutterで文字調整をめちゃくちゃ楽に対応できる。(10分くらい)
- なぜ文字調整が必要か？
  - 高齢化社会日本
    - 2020年には女性の過半数が50歳以上
  - 日本でサービス開発する以上、対応する方が良い！
  - 幅広い文字サイズで表示可能でなおかつ崩れないUIが必要！
- OSの文字サイズ
  - そもそもiOS/Androidにも調整ができる機能ある。
  - twitterでは対応されている。
- 考えるべき問題
  - 改行するべきところ
  - アイコンのサイズなど
- やってみた
  - https://github.com/Tenxia-inc/font_size_changeable
- 仕組み
  - TextScaleFactorがある。
    - 全てのTextWidgetに作用する乗数
    - MaterialAppのbuilderでうまいことできる。
  - 作用させたくない要素には、明示的に1を設定すればサイズは変わらない。
  - Text以外のWidgetにも適用させるとGood！！
- スライドのURL
  - https://docs.google.com/presentation/d/1hvSX3ZzXPZZr3HeoBNhJiqSff-bPPa-UhhszgmClN2Q/edit#slide=id.g56f2e3b4b9_0_20

## 感想
- DeskTopアプリを作るのは無理ゲーっぽい。
- まだ発展途上なので、コントリビュートしやすい/今後に期待できる。
- 文字サイズの話など、意外とFlutterだからできることも多い？
- Flutter頑張るぞー！