概要

Flutter 3.24のアップデートにて、
Flutter GPU と呼ばれる低レベルのグラフィックレンダリングのAPIが紹介されました。
Flutter GPU により、2Dだけでなく3Dのグラフィックが、
ネイティブのコードの利用をせずに利用できるようになります。

本セッションでは、Getting started with Flutter GPUと、
私の調査結果から、このFlutter GPUについて紹介、解説を行います。

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

• Flutter での3次元レンダリングの過去
• Flutter GPU について
• Flutter GPU での2次元図形作成
• Flutter Scene を利用した3次元モデルの描画
• Flutter x 3D の未来

本セッションを通して、Flutterの未来を覗いてみませんか？

想定視聴者

• 3D モデルを利用したFlutterアプリ、ゲームを開発しようとしている方
• 高度なアニメーションをFlutterで実装しようとしている方
• レンダリングを向上させるパッケージの開発に興味のある方

概要

モバイルアプリの開発において、審査は避けられないプロセスです。
しかし、リリース後にバグが発覚すると、再び審査を経る必要があり、ユーザーに不便を強いることがあります。
特にユーザー数が多い企業のアプリでは、このプロセスが大きな課題となり得ます。

このセッションでは、月間約2万人が利用する弓道アプリ「採点簿」での実際のCodePush導入経験を基に、運用ノウハウを解説します。
また、このノウハウを本業の大規模アプリに組み込み、実際に稼働させた過程を具体的に説明します。

このセッションで得られること

• CodePushの基礎知識
• CodePushを本番環境で安定稼働させるまで適用戦略
• CodePushの安定性やパフォーマンスについて
• 実際の社内の大規模アプリにおけるCodePushの適用戦略

想定視聴者

• CodePushの導入を検討しているが、具体的な始め方がわからない方

概要

真心を込めて開発したアプリがカクついたときのショックは、今でも忘れられません。

アプリがスムーズに動かないとき、あなたなら何から始めますか？どこから修正しますか？リビルドの回数を減らすために const を使ったところ、カクつきが改善されました。でも、リビルドの回数は何回から何回に減少したのでしょう？パフォーマンスを改善する際には、推測に頼るのではなく計測をしてボトルネックを特定することが重要です。

本セッションでは、UIパフォーマンス計測の入門として、DevToolsに注目します。DevToolsは、Flutterアプリのパフォーマンス計測には欠かせないツールです。特に、フレームレートの監視、ジャンクやスクロールヒッチの検出、ウィジェットのリビルドの計測、メモリの割り当てとCPU使用率の分析に焦点を当てます。そして、サンプルプロジェクトを使って実際にUIパフォーマンスを計測し、問題の原因を特定し、一つずつ改善していきます。

UIパフォーマンスの問題により、描画が乱れたり、操作が遅くなったりすることは珍しくありません。そんなときでも焦らず計測し、ボトルネックを特定し、問題を解消するための実践的な方法を、デモを交えて紹介します。

想定視聴者

スムーズで快適なアプリをユーザーに届けたい方
根拠を持ってUIパフォーマンスの改善をしたい方

概要

Flutterアプリケーション開発の核心となるのは、WidgetとPackageです。これらを深く理解することで、あらゆる開発課題に効率的に対応できるようになります。

本セッションでは、YouTubeで公開されている「Flutter Widget of the Week」や「Flutter Package of the Week」シリーズの内容からピックアップしてFlutterのWidgetとPackageについて解説します。
参加者の皆様は、Flutterの基本的な要素を再確認しつつ、新たな視点や活用法を学ぶことができます。WidgetとPackageの理解を深めることで、より効率的で創造的なFlutter開発のスキルを身につけることができるでしょう。

想定視聴者

本セッションは、以下の方々に特におすすめです：

Flutterを始めたばかりの初心者の方

基本的な開発経験はあるが、さらなるスキルアップを目指す方

WidgetやPackageについて体系的に学びたい方

Flutterを始めたばかりの初心者からなんとなく一通りの開発ができる人まで幅広く聞いてもらえるセッションにする予定です。

概要

以下のようなコードがDartで書けることはご存じでしょうか。
Dart3でパターンマッチングが導入されてから、色々な表現の幅が広がりました。このトークでは、あまり標準的ではないDart標準の表記方法をクイズ形式で紹介していこうと思います。

Person fromJson(Map<String, dynamic> json) {
  if (json case {'company': String company, 'name': String name}) {
    return Person(company: company, name: name);
  } else if (json case {'name': String name}) {
    return Person(name: name);
  }

  throw Exception('Illegal json format');
}

想定視聴者

Dart 中級者以上

概要

このセッションでは、プレーン Flutter API を使って、MVVM アーキテクチャと簡単な状態管理や依存性注入を作り、仕組みの基本を知ってもらい、
これらのキーポイントを知ることで、要件仕様書を満たし、機能の追加や振る舞い変更も、処理フローのテストもしやすい実装作りを説明します。

仕事や自分でアプリを作るにも、 「このボタンを押したら、サーバからデータを取得して画面のここの表示が変わる」などから、
「必要なライブラリなどの要素技術を選択して、どんな入力で、どんな関数やフローで、どんな出力やエラーを期待するか」の要件仕様書ができます。

ですが要件仕様書を愚直に Widget に実装すると、神Widgetが誕生してしまうので、
一般的に MVVMで、Clean Archtecture に則り、View はデータの表示に徹し、ViewModel はデータ（状態）の提供と更新に徹し、
状態管理ライブラリで、状態更新された View のみの表示更新①、DI/依存性注入ライブラリで、テストコード①②を実装しています。

①Riverpod/GetItは、MVVM 専用ではありませんから、実装コードには工夫が必要！
②テストする関数やフローの実装を変えず、依存するデータや状態をテストダブル（モックオブジェクト等）にすり替えます。

想定視聴者

初心者から中級者

概要

このセッションではFlutter創設メンバーであるEric Seidelらが手掛けているサービスのShorebirdについて話します。
モバイルアプリの更新はWebアプリとは異なり、各プラットフォームのストア審査を通過する必要があり、時間と手間がかかります。
特に、ユーザーの手元で発生している不具合対応のアップデートが必要な状況では、この審査プロセスが迅速なリリースの障害となることがあります。
Shorebirdを使えば、AndroidとiOSアプリをストアの審査なしで素早く更新することが可能になります。
セッション内では実際にコードの修正を行い、ストアを経由せずにアプリを更新するデモンストレーションを行う予定です。

想定視聴者

• アプリの更新プロセスを効率化したいと考えている開発者
• Shorebirdを活用してリリースサイクルの短縮やアジリティの向上に興味がある開発者

概要

本セッションでは、FlutterとDartを活用した総合チケット管理システムの開発経験を共有します。
Flutter/Dartのクロスプラットフォーム対応の強みを最大限に活かし、Webサイト、モバイルアプリケーション、バックエンドを一貫して開発した経験を共有します。

システム構成

• Flutter Webによるチケット購入サイト
• Flutter Webによる主催者向けチケット管理サイト
• チケット管理アプリケーション

技術スタック

• Flutter (Web/iOS/Android)
• Supabase (データベース)
• Cloudflare Workers + Dart(バックエンド)
• Stripe (決済処理)
• Prometheus, Grafana(可視化とアラート)

その他

• コード共有による開発効率の向上とメンテナンス性の改善
• Supabase RLSのユニットテスト実装によるデータセキュリティの強化
• Dartバックエンドの実装・運用

対象者

• Flutterでのクロスプラットフォーム開発に興味のある開発者
• Supabase+Stripeの決済システムに興味のある方

（注：本プロジェクトは進行中のため、詳細は変更の可能性があります）

概要

AwarefyではローカルキャッシュのためのパッケージをHIVE→Isar→Floor（sqflite）という流れで置き換えてきました。ローカルキャッシュを実装する上でのキャッシュ戦略について、Floorでの実装を交えながらお話しします。

想定視聴者

• SQLになかなか触れることがないが、知識をつけたい方
• ローカルキャッシュについて知りたい方
• Floorについて知りたい方

概要

Flutter アプリケーションにおいて、ジェスチャー操作は重要な UI 要素です。基本的なタップやスワイプは広く実装されていますが、より複雑で洗練されたジェスチャー操作の活用はまだ十分ではありません。
複雑なジェスチャーの実装には、 GestureDetector の深い理解が必要です。また、多様なジェスチャーの種類、適切な制御方法、カスタムジェスチャーの作成など、高度なスキルが求められます。
本セッションでは、 GestureDetector の仕組みから、様々なジェスチャーの種類と実装方法、制御テクニック、オリジナルのジェスチャー作成までを包括的に解説します。実践的なコード例と共に、複雑なジェスチャーを使いこなすための知識とスキルを提供します。

1. GestureDetector の内部構造を理解
2. 利用可能なジェスチャーの種類と特徴
3. 複数のジェスチャーを組み合わせた高度な操作の実装
4. ジェスチャーの衝突を防ぐ制御テクニック
5. カスタムジェスチャーの設計と実装方法

想定視聴者

・より高度なユーザーインターフェースの実装に挑戦したい開発者
・独自のジェスチャー操作を実装したいと考えているアプリ開発者

概要

Dart の Class modifiers （クラス修飾子） は、2023年5月にリリースされた Dart 3 で大幅に機能が強化され、今では Dart/Flutter で開発するアプリのクラス設計において欠かせない存在となりました。

本セッションでは、Dart の Class modifiers の機能を簡単におさらいするとともに、実際のモデリングやクラス設計、実装においてどのように活用できるのかを紐解きます。Class modifiers の理解を深めることで、インターフェースを利用した抽象化、sealed class を利用したパターンマッチングなど、クリーンなコードを書くためのヒントを得られます。

また、Dart の機能・言語仕様にとどまらず、 Class modifiers を知り、活用することで Flutter アプリの開発にどのようなメリットが生じるのか、といった実践的な内容にも踏み込んで解説します。

想定視聴者

本セッションの想定視聴者は次のとおりです。

• Flutterアプリ開発者全般
• Class modifiers をどのようにクラス設計に活用できるのか、公式ドキュメント以外の実践例が知りたい
• Class modifiers を利用したクラス設計が、アプリ開発にどのようなメリットをもたらすのかを知りたい

概要

このセッションでは、Flutter公式が開発しているvideo_playerについて話します。
video_playerの構成や使える機能などの紹介はもちろん、動画という各ネイティブ独自の機能を呼び出すときに考えなければいけない難しい部分についての話を行います。
video_playerはシンプルな機能しか提供していません。
本セッションでは、そんなvideo_playerを拡張するためにはどのような実装が必要かを、基本的なHLSの説明を元にvideo_playerに追っかけ（タイムシフト）再生を追加する例を元に紹介します。

1. video_player
   1. 概要
   2. 全体構成
   3. 使える機能、使えない機能
2. video_playerのpigeonを使ったネイティブコード呼び出し
3. video_playerに機能追加を試して理解を深める
   1. AVPlayerとExoPlayerの仕様差異とその吸収の仕方
   2. ネイティブ機能を使うパッケージ開発の困難なところ
4. video_playerの直近の動きと今後

想定視聴者

・video_playerを使っている人
・Flutterの動画再生に興味がある人
・Flutterでネイティブコードの呼び出しを実装したことがある人、興味がある人

概要

チーム開発において、効率的な開発環境はプロジェクトの成功に不可欠です。
本セッションでは、Flutter 開発における環境構築から CI/CD といった開発フロー全体における、具体的なノウハウとプラクティスを発表します。
チームメンバーが開発に集中できる環境を整え、生産性の向上を目指しましょう。

具体的には、以下のトピックを中心に解説します。

• SDK やツール管理: Flutter 開発に必要な SDK やツールの効率的な管理方法について解説します。
• マルチパッケージ (モノレポ) 管理: ローカルのマルチパッケージ管理やタスクランナーについて解説します。
• 静的解析: Dart コードに限定せずプロジェクト全体の Lint や Formatter について解説します。
• CI/CD (GitHub Actions): Issue Ops や GitHub Actions を活用した CI/CD パイプラインの構築や実行時間を抑えるノウハウについて解説します。

想定視聴者

• チームの開発環境を改善し、開発効率を高めたい Flutter 開発者
• 新しい Flutter プロジェクトを立ち上げ、効率的な開発基盤を構築したい方

概要

デザインシステムの文脈の元、
Flutterでデザイン再現度を上げるにはどうすべきか以下のような内容を話します。
※ デザインツールはFigmaを前提としています。

・ チームでのデザインシステムへの取り組みの紹介
・ デザイナーの巻き込んでいくか
・ 実際のFlutterでのデザインの再現方法
・ プログラムしやすいデザインとして、デザイナーに何を連携して何をデザインシステムとしてまとめたか紹介

想定視聴者

・ デザインの再現度を高めたい方。
　・ Figmaを見てFlutterで実装する際のTipsを知りたい方。
・ 「デザインシステム」・デザイナーと実装しやすいデザインについて協議を進めていきたい方。

概要

「ダウンロードしておいたファイル（端末に保存したファイル）を利用してアプリを動作させる方法」について設計・Tips・注意点を紹介します。
※ 実際に業務で利用した知見が含まれます。

現状含んでいない内容
オフラインで実行した処理（ポイント付与など）を、オンラインに繋げた際に連携する方法。
※ 実績がないため、用意できたとしても調査した結果のみとなります。

想定視聴者

・ オフラインを前提としたアプリを検討したことがあり、Flutterアプリを動作させる方法についてヒントが欲しい方。
・ 端末内にファイル保存をする仕様を検討されている方。

概要

Awarefyでは、MaestroによるE2Eテスト環境を構築し、運用しています。そして、実行にかかるコストを削減するため、Maestroが用意しているCIサービスであるMaestro Cloudを使わず、GitHub Actionsからself-hosted runnersで実行することに成功しました。
Maestroを用いたE2Eテストの実装から、self-hosted runnersで実行するためのハウツーについて話します。

想定視聴者

• E2Eテストを導入したい方
• Maestroの導入に興味がある方
• Maestroをself-hosted runnersで実行したい方

概要

社内向けのOpenID Connect (OIDC)クライアントライブラリ 開発した経験を共有します。
株式会社GENDA が提供するGENDA ID (グループ横断の ID プラットフォーム)に対応するため、FlutterアプリからOIDCのRelying Partyとして機能するPublic Clientライブラリの開発プロセス、直面した課題、そしてその解決策について詳しく説明します。

主なトピック

1. OIDCの基礎
2. Dartでのライブラリ開発における挑戦と学び
   • iOSアプリエンジニアの視点からみたDartとFlutterの特徴
   • ライブラリ開発特有の考慮点と実装テクニック
3. プライベートリポジトリを活用した社内向けライブラリのベストプラクティス
4. OIDCクライアント実装に必要な周辺技術の解説

想定視聴者

• Flutterアプリ向けのライブラリ開発をやってみたい方
• Flutterアプリ開発に慣れていない方
• OpenID Connect (OIDC)という言葉を知っているだけで詳しくない方

聴衆が得られる知見

• Dartでのライブラリ開発のベストプラクティスと落とし穴
• 企業内でのプライベートパッケージ管理と配布のテクニック
• OIDC実装における共通の課題と解決策

概要

弊社ではネイティブアプリとWebアプリをFlutterでのフルリプレイスを進めていて、AndroidとWebをフルリプレイスすることができました。
Flutterで独自デザインを実現するためのカスタマイズには制限があり、どこまでできるのか頻繁にデザイナーとのやり取りが発生しました。

本セッションでは、Flutterのデザインカスタマイズの制限をどのように克服し、デザイナーとの調整をスムーズに進めたかを共有します。
特に、Widgetbookを活用することでデザイン調整の工数をどのように削減したか、実際の体験談を交えて紹介します。

想定視聴者

• デザイン調整に課題を感じているFlutterエンジニア
• デザイナーと頻繁にやり取りするエンジニア
• UI/UXデザインの効率化に関心のある開発者

概要

画像切り抜きパッケージ "crop_your_image" の公開から 3 年が経ちました。

LIKE 数は 500 に迫り、POPULARITY は 98%、リポジトリへの issue やプルリクは今でも定期的に作成され、画像切り抜きパッケージとして当初の想定の何倍も使われていると自画自賛しています。

このセッションでは、そんな crop_your_image パッケージの開発を振り返りながら、パッケージ開発の経緯や使いやすいパッケージを実現するためのアイデア、パッケージ開発から得られるスキルやノウハウなどを余すところなく共有しながら、パッケージ開発が普段のアプリ開発に対しても大きな糧になることを説明します。

想定視聴者

• パッケージ開発に興味のある方
• パッケージの使い方に悩まされたことがある方
• 「共通クラス」をもっと使いやすく作りたい方

概要

Studyplusは、多機能かつユーザー数の多い大規模なネイティブアプリです。弊社では、数年前からこのStudyplusのネイティブアプリと同様の機能を持つWebアプリをFlutterを使ってフルリプレイスするプロジェクトを進めてきました。
このセッションでは、ネイティブとWebをワンソースで開発するという他にないレアな事例を基に、リプレイスプロジェクトの進め方、直面した課題、そして得られた知見について詳しくお話しします。

• 大規模ネイティブアプリのFlutterリプレイス概要
• Webプラットフォームとのコード共通化の背景と目的
• リプレイスを進める上での課題と対処法
• プラットフォームごとの考慮点と具体的な実装アプローチ
• プロジェクトを通じて得られた知見

想定視聴者

• 大規模アプリケーションのFlutterリプレイスに興味がある方
• 複数プラットフォームでのコード共有に挑戦している方
• リプレイスプロジェクトでの課題や知見について興味がある方