LoginSignup
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-10

2日目

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

今日は「よっしゃ!何か作るぞ!」と思ったのですが、ちょうど良いことにFlutter Meetup Tokyo #13が開催されるようです!

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

Flutterプラグインでdart:ffiを使ってみる (@espresso3389)

  • dart:ffiって何?
  • 使ってみる。
    • テンプレ作成
    • 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++のシングルソースで開発できる!
  • サンプル
  • 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 )

  • アプリの名前のプラグインを作ってみた!
  • プラグインの作り方
    • アプリとアイコンについては公式通りにやればOK
    • コードの書き方は似ているプラグインを参考にした。
    • 一度公開すると削除できないので慎重に!
    • 英語は頑張る!
  • 公開した後の感想
    • どのくらい使っているのかわからない。
    • 宣伝しないと誰も使わない。(そもそも気づかない。)
    • 継続的に変更するところでもないから、直接書き換える勢が多いのかも。
    • みなさんぜひ使ってください!
  • まとめ
    • 簡単なものでも意外と本体にない
    • コントリビュートのチャンス!
    • PRやいいねお願いします!
  • スライドのURL

Atomic DesignをFlutterでやってみた (つっちー )

  • Atomic Design
  • BLOCの設計 -
  • まとめ
    • FlutterのいいところはUIが簡単に素早く作れる
    • 高度に抽象化されたものより単純で冗長な方が良い
    • Organismsレベルでは再利用できた方が良いかも。
  • まとめ
    • Atomic DesignでWidgetは再利用できるように作れる。
    • 再利用性を高すぎるとFlutterの良さがへる。
  • スライドのURL
    • 公開され次第反映します!!

そのアプリ…文字サイズをデカくしてもUI崩れないですか? (Masaokb)

  • Flutterで文字調整をめちゃくちゃ楽に対応できる。(10分くらい)
  • なぜ文字調整が必要か?
    • 高齢化社会日本
    • 2020年には女性の過半数が50歳以上
    • 日本でサービス開発する以上、対応する方が良い!
    • 幅広い文字サイズで表示可能でなおかつ崩れないUIが必要!
  • OSの文字サイズ
    • そもそもiOS/Androidにも調整ができる機能ある。
    • twitterでは対応されている。
  • 考えるべき問題
    • 改行するべきところ
    • アイコンのサイズなど
  • やってみた
  • 仕組み
    • TextScaleFactorがある。
    • 全てのTextWidgetに作用する乗数
    • MaterialAppのbuilderでうまいことできる。
    • 作用させたくない要素には、明示的に1を設定すればサイズは変わらない。
    • Text以外のWidgetにも適用させるとGood!!
  • スライドのURL

感想

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4