トーク

Flutter on the WebがStableになってから３年経ち、さまざまな変化が加えられてきました。
今年はHTML renderer廃止に関するドキュメントが公開され、今後CanvasとWasmのrendererが主力になっていきます
Wasmサポートによって良くなること、できなくなることをHTML,Canvas rendererと実際に動作を比較していきます。

このセッションでは、以下の内容についてお話しします：

1. Wasmとは一体何なのか
2. Flutter on the WebのWasmサポートで何が変わったのか
3. Wasmサポートで、できるようになること、できなくなることをHTML,Canvasとの比較
4. Flutter on the Webの今後

想定視聴者
Flutter on the WebのWasmサポートで何が変わるか興味がある方

概要

リリースしたアプリのクラッシュ事例を追うべく、Crashlyticsなどのサービスを眺めていると、身に覚えのないスタックトレースを見た経験はありませんか？ Flutter では release buildの場合には、コードが難読化されバイナリに含まれます。
FlutterはAndroid・iOSをはじめとして多くのプラットフォームで動作させる事ができるフレームワークです。Flutterはどのようにして、多くのプラットフォームをサポートする難読化を実現しているのでしょうか？

このセッションは、大きく2つの要素から構成されます。
1つ目は、難読化されたコードに直面したときのトラブルシューティングに焦点を当てたものです。例えば、難読化されたスタックトレースを読む方法や、flutter symbolize の仕組みやオプションについて紹介します。
2つ目は、Flutter の難読化そのものがどのようにして行われるかについて焦点を当てます。Flutterが難読化を行うステップと各プラットフォームでの実例を紹介しつつどのような難読化が行われるかについて紹介します。

想定視聴者

• 難読化に関連したトラブルシューティングについて知りたい人
• 難読化そのものについて理解を深めたい人
• Flutter 特有のマルチプラットフォームでの難読化について知りたい人

本セッションでは、Flutterアプリの「Code Push」（即時コードアップデート）を実現するShorebirdについて深掘りします。Shorebirdを使用することで、FlutterアプリのDartコード部分の更新を、ストア審査なしでエンドユーザーのデバイスに即座に配信できます。

ただし、以下の重要な点に注意が必要です：

• 初回リリースや大幅な変更時は従来通りの審査が必要
• 更新できるのはDartコードのみ（ネイティブコードは不可）
• 各アプリストアの規約遵守が必須

このセッションでは、以下の点に焦点を当てます：

• Shorebirdの基本概念と仕組み
• Code Pushの使用方法（ライブデモ含む）
• CI/CDとの統合
• 料金体系
• Shorebirdの利点と課題
• 実プロジェクトでの経験に基づく知見と教訓
• アプリストア規約との整合性と法的考慮事項

想定視聴者：

• 即時アップデートに関心のある開発者
• Shorebirdを検討中の方
• 実践的な使用例を知りたい方

複数プロジェクトでのShorebird導入・運用経験を基に、実践的な洞察と具体的なアドバイスを提供します。理論と実践の両面から、Shorebirdの効果的かつ適切な活用方法をお伝えします。技術的側面だけでなく、法的な観点からも安全な利用指針を示します。

概要

SliverAppBarはスクロールに応じて大きさが変化したり、スクロールを中断時に出現したりするAppBarのWidgetです。
ちょっとリッチなスクロールを実装する際に利用するこのWidget、
どうしてこのような動きが実現できるのでしょうか？
SliverAppBarを題材に、FlutterのSliverの中身を深掘りして解説します。
また、Flutter 3.24で追加されたPinnedHeaderSliver、SliverResizingHeaderについても、中身を解説します。

具体的には以下の内容について解説します。

• SliverAppBar の動き
• Sliverとは
• Sliverの仕組み
• SliverAppBarの仕組み
• PinnedHeaderSliver、SliverResizingHeaderについて

Flutterでのスクロール画面でのエラーに対し、
CustomScrollView、Sliverの利用はよく採用される解決策です。
今回の発表を通してSliverへの理解を深めていただき、
開発力の向上の一助となればと思います。

想定視聴者

• Flutterでリッチなスクロール画面を実装したい方
• Flutterの内部実装に興味のある方
• Sliverの取り扱いに悩んでいる方

概要

2025年8月にFirebase Dynamic Links（FDL）のサービスが終了することが発表され、多くのアプリ開発者がAdjust、AppsFlyer、Bitly、Branch、Kochavaなど代替ソリューションの選定を迫られています。

本セッションでは、実際のプロダクトで行ったFDLからAdjustへの移行作業を通じて、FDLの主要な機能をカバーしつつ、Adjustを用いたディープリンクの設定方法、ディープリンク機能の実装例、分析に不可欠なログの実装方法、およびパーソナライズされたユーザー体験を提供するための戦略とその制約を紹介します。

これにより、FDL終了後のアプリ開発において、どのようにスムーズな移行を実現し、必要な機能を維持するかについて、明確な指針を提供します。このセッションを通じて、ディープリンク技術がどのようにアプリの成長と成功を支えるかを理解し、実際の開発に役立つ知識を提供します。

想定視聴者

• FDLを利用したプロダクトを運用しており、代替の移行先を検討している方
• ユーザーエンゲージメントの向上やアプリの成長に関心があり、ディープリンク技術を活用したいと考えている方

概要

「フォーム」を取り扱うアプリの機能実装は、考慮すべき点が多岐に渡り、難易度が非常に高い部分です。

例えば、商品注文や申請作成の入力画面は、単純な入力画面とは性質が異なり、複雑な仕様の中でミスができない実装が求められます。
そこでは、高度なバリデーションや、複数ソースからの動的なデータ取得・更新など、「複雑なロジックをフロントで実装する必要がある」点で多くの課題が存在します。

Flutterの活用は、開発効率を上げる有効な手段の１つですが、単に導入するだけでは上記課題は解消しきれません。
本トークでは、複雑度が極めて高いフォーム開発を、宣言的かつ型安全に保つことで、効率的に実現する方法をご紹介します。

トピック

• Flutterでのフォーム画面開発
  • 実プロダクトの事例紹介
• 状態管理とバリデーションのアプローチ
  • 状態設計の手法
  • Riverpod, flutter_hooksの活用
  • フォーム要素間の相互依存関係の処理
  • 複数画面間でのデータ同期の実装
• ユーザー体験向上の工夫
  • エラー、アラートのフィードバック
  • 入力補助
  • 細かな操作感

想定視聴者

• フォーム開発の設計や実装に悩んだことがある方
• Flutterを使って効率的に複雑なフォームを実装したい方

概要

Flutter でのアニメーション実装は、簡易に実装できてアプリの魅力を向上させる重要な機能ですが、複雑なアニメーションや大規模なアプリケーションでは、パフォーマンスの問題に直面することがあります。
複雑なアニメーションを実装する際、フレームレートの低下やメモリ使用量の増加など、パフォーマンスの低下が課題となっています。また、アニメーションの最適化手法や、適切なタイミングでの RepaintBoundary の使用など、開発者が理解すべき点が多岐にわたります。
本セッションでは、 Flutter のアニメーションを深く理解し、パフォーマンスを向上させるための実践的な手法を紹介します。 Flow を活用した複雑なアニメーションの実装、アニメーションのパフォーマンス最適化テクニック、そしてレンダリングを最小限に抑えるための tips について詳しく解説します。

1. Flutter アニメーションの基本概念と内部実装を理解する
2. Flow を使用した高度なアニメーションの実装手法
3. アニメーションパフォーマンスの測定と分析
4. レンダリング最適化テクニック

想定視聴者

・ 複雑なアニメーションの実装に苦戦している開発者
・ アニメーションのパフォーマンス向上に興味がある開発者

概要

WINTICKETアプリは2021年からトランクベース開発をFeatureFlagを取り入れながら行ってきました。
大規模が故に常に10数個のFeatureFlagをコードベースに埋め込みながら新機能の開発を進めていますが、公開前の機能が見えてしまったり、リリース前のコードが実行されてしまうなどの問題がいくつかありました。

本セッションではFeatureFlag運用を3年ほどした経験から、WINTICKETアプリ開発での具体的な運用方法とどのように可用性を向上させたFeatureFlagの運用戦略をとっているかを紹介します。

・WINTICKETでどのようにFlutterでFeatureFlagを用いたトランクベース開発の運用をしているかの紹介
・その運用で実際に起きた不具合例の紹介
・そのような不具合がどのような原因で発生したのかの分析
・不具合を起こさないためのFeatureFlag運用戦略とその具体的な対応方法の紹介

想定視聴者

・FeatureFlagを用いたトランクベース開発をしている方
・FlutterアプリでFeatureFlagを用いたトランクベース開発を検討している方

概要

Mobile向けに開発したものをWebや他のDesktopプラットフォームで表示すると、「なんか違う？」と感じたことはありませんか？
本セッションでは、MobileとDesktopをワンソースで開発する中で遭遇した実際の事例を基に、Desktopプラットフォームでの開発時に特に注意が必要なポイントを詳しく解説します。

• MobileとDesktopプラットフォームの違いについての概要
• プロジェクトで遭遇した具体的な事例の紹介
• 注意が必要なWidgetと、それぞれの対応策
• プラットフォームごとの差分を考慮した開発手法の提案

想定視聴者

• MobileアプリをDesktopプラットフォームに展開しようと考えている方
• Desktopプラットフォームでの開発に興味がある方
• ワンソースでの複数プラットフォーム対応に挑戦している方
• Desktopプラットフォームの開発経験が少ない方

概要

アプリケーションの機能やレイヤーをディレクトリで分けて表現することは普通に行うことだと思います。
このディレクトリの構成を機能単位やレイヤーでパッケージ化します。

パッケージ化すると機能ごとの依存度が減り、意図しない機能を実行する危険性を減らすことができます。
また、単一のパッケージのみテストを実行したり、依存度が少ないことで機能を切り離したりすることも比較的容易になります。

ただし、レイヤーでパッケージ化する場合はある程度入念な設計が必要になります。
例えば、 UI から直接通信処理を実行させたくないような場合、単純にパッケージを分割しているだけではファイルをインポートすることで簡単に処理を実行できてしまい、あまりその恩恵を受けることができません。
この恩恵を受けるための一つの手法として依存性逆転の原則があります。

ここでは、 Riverpod を利用した依存性逆転の原則の実装の説明と melos を利用した依存の解決方法、並列でテストを実行した際のカバレッジの算出など、開発の現場で行った実践的なお話をさせてもらいます。

想定視聴者

• これからサービスを立ち上げる方
• アプリケーションが大きくなって依存の整理に苦しんでいる方

概要

SLI/SLOはSREでよく使われる概念ですが、モバイルアプリ開発にはまだ馴染みが薄いかもしれません。
私たちのプロダクトでは障害発生率が高く、早期の検知と解消が求められていました。
そこで、SLI/SLOの概念をモバイルアプリに適用し、ユーザー体験の低下を即時に検知する仕組みを構築しました。

この仕組みにより、以下の指標をリアルタイムで監視し、即時に対応可能となりました：

• 失敗率：一定以上のユーザーが機能利用時にエラーが発生したケース
• キャンセル率：一定以上のユーザーが機能利用時に何らかの理由でキャンセルしたケース
• 中断率：一定以上のユーザーが機能利用時にアプリを強制終了したケース

現在、この監視システムは40以上の機能に適用されています。

このセッションでは以下の内容について詳しく解説します：

1. SLI/SLOの基本概念
2. 一般的なSLI/SLOとユーザー体験を検知するSLI/SLOの違い
3. ユーザー行動の計測方法
4. 計測基盤の構築：工夫と課題
   • 時系列データのログ計測
   • 高オブザーバビリティの実現オプション
5. アラート基盤の構築：工夫と課題
   • ノイズ最小化の方法
   • チームにアラートを定着させる方法

想定視聴者

• Flutterアプリ内でのDartを用いた計測基盤構築に興味がある方

概要

2024年に発表されたFigmaの新機能 フォーカスビュー、ステータス管理、etc... これらDev Modeの機能の概要を説明すると共に、ベストプラクティスを共有します。
Figma Dev Modeの活用がFlutterの開発体験をどれだけ向上されるかをご覧頂きます。

エンジニアとデザイナーが共同で発表するこのトークでは、デザインから実装までの一貫したワークフローをロールプレイング形式でお見せします。
エンジニアとデザイナーそれぞれの仕事の相互理解に繋がる内容で、一緒にご覧頂くことで組織のコラボレーションを強化することにも繋がるでしょう。

想定視聴者

• Flutterエンジニア
  デザイナと協業し、Widgetの実装等を行うFlutterエンジニア
• UI/UXデザイナー、
  デザインツールとしてFigmaを利用し、Flutter開発者との協業するデザイナー。
• プロダクトマネージャー
  デザインと開発のプロセスを効率化し、チームのアウトカムを向上させたいマネージャー

Impellerについて知っていますか？Skiaに代わる形で導入されたレンダリングエンジンでFlutter v3.7.0でiOSにおいてpreviewが始まり、v3.16.0ではAndroidでもpreviewが開始されました。
皆さん様々な印象があると思います。有効にしたら動作が速くなった、名前が強そう、シャドウ重くない？などなど...
とはいえ実際にSkiaからどのように変わり、なぜ速くなったのかを理解してる人はあまり多くないと思います。
FlutterはありがたいことにOSSでこの魔法のような技術がどう実現されているかを実際に読むことができます。
このトークではWidgetTreeから実際に描画されるまでを追いながらSkiaからImpellerでどのように改善されたかを解説していきます。

想定視聴者

• Flutterの内部を知りたい人
• Flutterに根ざして開発したい人

概要

​​令和6年（2024年）4月1日に「改正障害者差別解消法」が施行され、事業者による障害のある方への合理的配慮の提供が義務化されました。ECサイトにおいては誰もが安心してサービスを利用できるように、ウェブアクセシビリティの確保が求められています。

そんななか、私が所属する株式会社10Xで提供している小売チェーン向けECプラットフォームStailerでは視覚障害者の方により便利なネットスーパー・ネットドラッグストア利用体験を提供すべく、スクリーンリーダー（音声読み上げソフト）対応を実施しました。

スクリーンリーダーはFlutterがフレームワークとしてサポートするアクセシビリティ機能の一つでもあります。他にはフォントサイズやコントラストがサポートされています。

このセッションではFlutterが提供するスクリーンリーダーをサポートする機能について説明するとともに、実際にStailerがスクリーンリーダーに対応した際に困ったことやワークアラウンドの紹介、チームにスクリーンリーダー対応を広めるための活動などをお話します。

参考 https://product.10x.co.jp/entry/2024/07/01/124355

想定視聴者

• アクセシビリティ対応に興味がある方
• チームの実装方針を決めたり広めたりすることがある方

概要

KDDI株式会社では、au PAYアプリを内製開発しており、2023年に部分的にFlutterを採用しました。
基本的にネイティブ（Kotlin/Swift）で開発しているところに、Add-to-appにより部分的にFlutterを取り入れている形です。
また、2024年には、ネイティブで開発してきたau PAYの関連アプリをフルリプレイスする形でFlutterを全面採用することにしました。
Flutterの全面採用は、アプリ開発では勿論、API-GWの開発でも採用しており、バックエンドを含めたAll Flutterなプロジェクトになっています。

本セッションでは、Flutterの部分的採用から全面採用に至るまでに得られた知見を皆様にお届けします。

・Add-to-appによるFlutterの部分的採用
　・Flutterで開発した機能
　・部分的採用で得られた恩恵と課題
　・状態管理にBlocを採用した話
・バックエンドも含めたFlutter（Dart）の全面採用
　・全面採用に踏み切った理由と狙い
　・All Dartによるクロスファンクショナルな開発
・部分的採用か全面採用かの判断の勘所

想定視聴者

・既存のネイティブアプリにFlutterを部分的に採用することに興味がある方
・現場でFlutterを部分的に採用するか全面採用にするかで迷われている方

概要

Flutter におけるアプリ開発において、 DevTools は必要不可欠な存在です。
しかし既存の DevTools に独自の機能をカスタマイズできることはあまり知られていません。
DevTools を独自にカスタマイズすることで、ログの表示制御、キャッシュの表示、アプリ内の開発者用の画面を DevTools に移行するなど、開発体験の向上が見込めます。

このセクションでは、devtools_extensions パッケージを使用して、 DevTools を独自にカスタマイズする方法や、
実際のチーム開発でどのような機能をカスタマイズしているかなどの実例を紹介します。
加えてパッケージ製作者向けに自身のパッケージに DevTools Extensions を提供する方法も解説します。

想定視聴者

• DevTools の開発に興味のある方
• チーム開発の生産性を上げたい方
• アプリ内の開発用画面を DevTools に移行させたい方

概要

Flutter SDK は、Google の Material Design と Apple の Human Interface Guidelines に準拠したテーマ (Material Theme, Cupertino Theme) と関連 API を提供しており、これにより OS 標準のデザインに沿ったアプリ開発が容易になります。
しかし、独自のデザインシステムを採用したい場合にテーマ管理が複雑化したり、OS 標準のデザインシステムアップデートに伴う破壊的変更により開発コストが増大したりする可能性があります。

本セッションでは、Flutter のテーマと各 Widget のスタイルの関係性を掘り下げ、OS 標準のデザインシステムへの依存を軽減するテーマ管理のアプローチを発表します。
これにより、独自のデザインシステムの実現や、OS 標準のデザインシステムアップデートの影響を最小限に抑えることを目指します。
加えて、Flutter Roadmap でも触れられている blankcanvas の最新動向についても解説します。

想定視聴者

• 独自のデザインシステムを Flutter アプリに適用したいと考えている開発者
• Flutter のテーマ管理をより深く理解し、効率的な開発手法を学びたい開発者

概要

Dart の新機能であるマクロ（Dart macros）の登場により、Flutter アプリ開発で煩雑だったボイラープレートの問題や build_runner によるコード生成の問題の解決が期待されています。

とはいえマクロはまだまだ試験的に公開されている段階であるために自由に触りづらく、できることを把握してどう活用するかをイメージしづらいのが現状です。サンプルとして話題に上がるマクロも JSON とオブジェクトの変換が簡単になるというもので、Flutter アプリ開発にどれほどのインパクトをもたらす機能なのかをイメージするには力不足です。

このセッションでは、実際に Flutter アプリ開発で活用することを想定したマクロをいくつか紹介し、実際にコーディングして使ってみることで、マクロ導入後の Flutter アプリ開発がどのように変化するのかを体験します。

来るマクロの正式リリースに備え、マクロの活用方法や作り方、そして適切な距離感を今から考えてみませんか？

想定視聴者

• 2025 年以降も Flutter アプリ開発を続ける予定のすべての開発者
• マクロを使う方・作る方どちらの目線もカバーした内容です

概要

This presentation introduces two tools for bridging Flutter apps with native code: FFI (Foreign Function Interface) and Pigeon. FFI enables direct calls to C/C++ functions, optimizing performance and hardware access. Pigeon streamlines method invocations between Flutter and native platforms (Android/iOS), facilitating better data communication. I’ll demonstrate the implementation and success stories of using these tools to enhance native functionality in Flutter applications.

想定視聴者

Aiming to expand knowledge of FFI & Pigeon for native platform integration.