FlutterKaigi 2024 day2

https://2024.flutterkaigi.jp/session/b57f3efd-b31d-4d57-aaa3-f45f1b17f727

出前館は3つアプリがあってどれも Flutter

• ユーザ
• 配達員
• 加盟店

https://speakerdeck.com/demaecan/chu-qian-guan-niokeruflutternoxian-zai-tokorekara?slide=14

https://pub.dev/packages/flutter_gen

状態と機能を既存の UI にとらわれずに整理したい
個人情報の入力を省略して共有する方法はないだろうか

https://2024.flutterkaigi.jp/session/61d31fb9-fbc5-4d01-aad5-139e6568db15

https://dart.dev/language/macros

package を導入するとそれだけでコストになる
マクロを活用することで packages を導入しなくても実現できる選択肢が増える

• Type
• Declaration
• Definision

フェーズによってマクロの適用順序の結果が一意に定まるようにしている

https://2024.flutterkaigi.jp/session/18ffaf08-03ac-4284-95cf-bd217dbccd69

https://m3.material.io/
https://developer.apple.com/design/human-interface-guidelines

https://docs.flutter.dev/ui/widgets/material
https://docs.flutter.dev/ui/widgets/cupertino

https://api.flutter.dev/flutter/material/MaterialApp-class.html

https://api.flutter.dev/flutter/cupertino/CupertinoApp-class.html

MaterialApp は AnimatedTheme でテーマの切り替えのアニメーションのカスタマイズが可能

https://api.flutter.dev/flutter/material/AnimatedTheme-class.html

https://m3.material.io/styles

• Color
• Elevation
• Icons
• Motion
• Shape
• Typography

https://api.flutter.dev/flutter/material/ActionChip-class.html

https://api.flutter.dev/flutter/material/Theme/of.html

Theme.of(context) で親からもらった Context でテーマ継承してオーバーライドしたりできる

https://api.flutter.dev/flutter/material/Colors-class.html

Action Chip は M2 までで M3 では削除されている

https://m2.material.io/components/chips

M2 と M3 の差分がまとまっている

https://m3.material.io/components/chips/overview

https://api.flutter.dev/flutter/widgets/InheritedTheme-class.html

https://api.flutter.dev/flutter/material/ThemeExtension-class.html

https://pub.dev/packages/theme_tailor

https://pub.dev/documentation/app_color/latest/

https://www.fluttermix.com/

https://ui.shadcn.com/

https://flutter-shadcn-ui.mariuti.com/

https://github.com/flutter/flutter/issues/53059

https://2024.flutterkaigi.jp/session/05b3d592-16e4-4831-b6f4-44870c555dd1

Obfuscate 難読化の英語表現

• リバースエンジニアリングへの防御
• バイナリサイズの軽量

Flutter release build で難読化される

Obfuscation map に難読化の結果をマッピングしていく

https://docs.flutter.dev/deployment/obfuscate

--split-debug-info で Dart プログラムのダンプの出力先を指定できる

難読化のコマンド。ダンプ出力とセットで行う

flutter build apk --obfuscate --split-debug-info

難読化するときに symbols file が出力されるので、この file を元に symbolize で難読化を解除できる

symbols file は Production のスタックトレースの解析にも必要

Sentry
CI のためのプラグインが symbols のアップロードをサポート

https://github.com/getsentry/sentry-dart-plugin

https://dart.dev/overview#platform

Dart includes both a Dart VM with just-in-time (JIT) compilation and an ahead-of-time (AOT) compiler for producing machine code.

https://mrale.ph/dartvm/

対応時の Issue だろうか

https://github.com/dart-lang/sdk/issues/30524

Unlike Java, Dart doesn't have the keywords public, protected, and private. If an identifier starts with an underscore (_), it's private to its library. For details, see Libraries and imports.

https://dart.dev/language#important-concepts

各プラットフォーム向けのコマンドは Dart で記述されている

Android 向けの難読化？
Groovy で書かれている

https://github.com/flutter/flutter/blob/master/packages/flutter_tools/gradle/src/main/groovy/flutter.groovy

1. Dart 向けの難読化
2. Android 向けの難読化

2フェーズ実施する
他のプラットフォーム向けも同様

Web は Minification
Obfuscation しない

Flutter 向けに symbol files は複数必要？

• R8 の keep rule 相当の難読化しない方法もある
• debug symbols をバイナリに含めないオプションで軽量化できる
• runtime で型を比較しているランタイムエラーが発生しうる

https://2024.flutterkaigi.jp/session/e97ebf37-5753-43c9-83ea-2be68e7a4363

https://docs.flutter.dev/platform-integration/android/c-interop

https://pub.dev/packages/pigeon

FFI Foreign Function Interface

https://2024.flutterkaigi.jp/session/369e19d9-1f27-40e6-b294-64c6ca9bfcae

https://apps.apple.com/jp/app/omiai-オミアイ-恋活-婚活のためのマッチングアプリ/id582566462
https://play.google.com/store/apps/details?id=com.omiai_jp&hl=en

https://zenn.dev/p/omiai_techblog

ネイティブから Flutter にリプレイス
Add to App を利用して新しい機能から Flutter に置き換えていく
ネイティブコードはサービス開始 2012年からの積み重ねもあって OS 間の差異、技術的な負債が蓄積している状態

例外処理の対応方針が決まっていない
リプレイスするときに仕様策定が必要な状態

• Separation of Concerns
  • Flutter/Dart
  • Client/Server
• Design Pattern
• Testing Business Logic

repository を境界にしてサーバサイドの影響の吸収する層として重要な位置

base_ui は Figma に依存する
Figma から生成できると理想

system で 3rd party への依存を取りまとめる？
依存を吸収する層を作った方が良いのか？

https://pub.dev/packages/riverpod

riverpod Dart に閉じたものとそうでないものがある

• riverpod
• flutter_riverpod
• hooks_riverpod

アノテーションでサーバの実態をリプレイス用の適切なドメインに変換できる

bool を期待しているのに、 "0" : "1" とか返ってくるケースにも変換できる

ログイン頻度のロジックがクライアントに持つのが少し気になる
サーバ側で頻度のコードを送って欲しい気もする

業務知識の例外を用意して throw して UI で適切なユーザフィードバックを表現できるようにする

https://docs.flutter.dev/app-architecture

public member はドキュメントを書くことを強制する LInt ルール

https://dart.dev/tools/linter-rules/public_member_api_docs

PR で Unit Test Coverage が 100% がマージ条件の一つとして防御している

スニペット化を定義
スニペットが使えない場合はアラートを上げてペアプロする

Cursor に指示を出してコード生成する
このときにもスニペットを入力すると期待したコードが生成されやすい

https://2024.flutterkaigi.jp/session/0b5536f2-cde0-4224-b84c-df641daed1cb

https://api.flutter.dev/flutter/material/SliverAppBar-class.html

https://api.flutter.dev/flutter/rendering/RenderSliver-class.html

https://api.flutter.dev/flutter/rendering/RenderObject-class.html

• Widgets:
• Elements: 構成要素
• RenderObject: 画面描画を管理

https://api.flutter.dev/flutter/rendering/RenderObject/performLayout.html
https://api.flutter.dev/flutter/rendering/RenderObject/paint.html

https://docs.flutter.dev/ui/layout/constraints

Constraints go down. Sizes go up. Parent sets position.

制約は親から子へ伝わり
大きさは子から親へ伝え
親が位置を決める

Flutter ドキュメントにもスニペットが用意されている
https://api.flutter.dev/flutter/rendering/RenderObject/describeSemanticsConfiguration.html#rendering.RenderObject.describeSemanticsConfiguration.1

https://api.flutter.dev/flutter/rendering/SliverConstraints-class.html

https://api.flutter.dev/flutter/rendering/SliverGeometry-class.html

SwiftUI の Geometry とコンテキストは同じだろうか
https://developer.apple.com/documentation/swiftui/geometryreader

SliverAppBar が変化する実装の実体

https://api.flutter.dev/flutter/rendering/RenderSliverFloatingPersistentHeader/maybeStartSnapAnimation.html

新しく追加された Widgets

https://api.flutter.dev/flutter/widgets/PinnedHeaderSliver-class.html
https://api.flutter.dev/flutter/widgets/SliverResizingHeader-class.html