概要

Flutter で高度なグラフィックスを実現するために、これまでは RenderObject や CustomPainter を利用していました。
しかし、これらは CPU 上で多くの処理を実行することになってしまうため、柔軟性や表現力にどうしても限界がありました。

Flutter 2.8 で Fragment Shader を利用可能になり、GPU 上で処理を実行できるようになったため、より柔軟で高度なグラフィックスを実現できるようになりました。

本セッションでは Fragment Shader の基礎から Flutter での具体的な実装例についてお話しします。

トピック

• Fragment Shader とは
• Flutter で Fragment Shader が実行されるまでの仕組み
• Flutter における Fragment Shader の実装方法
• Fragment Shader の実装例と解説
  • Pixelate
  • Ink Sparkle
  • Hologram Effect
  • Transition Animation

想定視聴者

• Flutter で Fragment Shader を取り扱う方法や具体的な実装例に興味のある方
• Flutter でより柔軟で高度なグラフィックスを実現したい方

概要

画面タッチ時のタッチフィードバックは、Flutterに限らずとても重要な要素です。
Flutterの場合はInkWellウィジェットやMaterialウィジェットを用いることで比較的簡単にRipple effectを表現することが可能ですが、思うようにRipple effectが表示されなかったということは、初心者をはじめ、多くの方が経験されているのではないでしょうか？
本セッションでは、Material Designのガイドラインを読み解きながら、主にMaterialやInkWellウィジェットの内部実装を通してFlutterにおけるRipple effectの表示の仕組みや、細かな制御方法を解説します。その上で、様々なパターンにおけるRipple effectの実装方法などを紹介します。

想定視聴者

• FlutterのRipple effectに困ったことのある方
• 脱・初心者を目指したい方

概要

私たちのチームは、品質維持を目指してテスト戦略の見直しを行い、その結果、integration_testを用いた自動テストの導入に至りました。
これまで一年間の運用を通じて、自動テストのシナリオ数は40を超え、その過程で多くの課題と学びがありました。

具体的には、以下のような問いに対する答えを探求しました。

• 自動テストを実行する最適なフローとタイミングは何か
• 成熟したプロジェクトにおいて、どの機能から自動テストを導入すべきか
• 自動テストを実施するか否かの判断基準は何か
• 不安定なテストシナリオにどのように対処すべきか
• AutifyやMaestroなどの他のツールと比較して、何が違うのか

私たちがこれらの課題にどのように取り組み、何を学んだのかを共有します。さらに、以下の観点からも話を進めます。

• テスト戦略を見直すことになった背景と動機
• テスト戦略の見直しから自動テスト選定までのプロセス
• 自動テスト導入による得られた利益とデメリット

本トークは、Flutterとintegration_testを使用したプロジェクトの事例を中心に話しますが、その内容はモバイルアプリ全般の開発に役立つ情報を提供します。

想定視聴者

• Flutter開発で自動テストに興味がある方
• プロダクト開発において自動テストの運用を検討中の方

概要

出前館ではtoC向けに出前館アプリ、toB向けに配達員向けアプリ、加盟店向け受注管理アプリなどを提供しています。本セッションではそのアプリにおけるFlutter活用の現在とこれからの我々の取り組みをご紹介します。

想定視聴者

出前館ではtoC向けに出前館アプリ、toB向けに配達員向けアプリ、加盟店向け受注管理アプリなどを提供しています。技術選定時は、プロダクトやプロジェクト、開発チームの特性を考慮し、Xamarin、React Native、Kotlin Multiplatform Mobileなど、これまでさまざまな技術を採用してきました。多様な技術を扱うメリットもありますが、そのナレッジ共有や学習コスト、開発効率は課題でした。そこで我々は、Flutterの導入を進めることでそれらの課題へ現在アプローチを始めています。本セッションでは出前館におけるFlutter利用の現在とこれからをお話しします。

概要

「TOKYO MIX CURRY」はアプリストア評価4.8を獲得している「アプリでしか注文できないカレー屋」です
４年前よりFlutterを採用しており、その主要な機能である決済に関して、以下の方法を提供しています：

• Stripeによるクレジットカード決済
• Pay Pluginを統合したネイティブペイ(Google Pay / Apple Pay)
• PayPay

本セッションでは、実際の商用プロダクトとして4年間運用した際の課金に関するノウハウについて、詳細にまとめて解説します

• 課金の種類について
• クレジットカード決済
• Google Pay / Apple Pay
• PayPay
• In-App-Purchase(予定)
• セルフレジにおける決済
• まとめ

想定視聴者

• Flutterでの課金実装方法について知りたい方

概要

Dart言語はFlutterとともにアプリフロントエンドの領域で広く認知されてきました。しかし、バックエンドにおける実践的な活用例はまだまだ少ないのが現状です。
とはいえ、Flutterアプリ向けのBFF(Backend For Frontend)をDartで実装することは、型宣言を共通化することができ、生産性を飛躍的に向上させるアプローチとなり得ます。
本セッションでは、Dartをバックエンド・BFFに採用する背景から、dart_frogというパッケージの特徴と、マルチパッケージ管理ツールであるmelos を利用して、Flutterでのアプリ構築を加速させる過程について深掘りします。更に、実際の案件でdart_frogとmelosを導入していく過程、そしてそれをどのようなプロジェクトに組み込んだのかの経験談を交えながら、Dartバックエンド・BFFとしての魅力と、それを実現する具体的な手法をお伝えます。

想定視聴者

• バックエンド・BFFにDartを採用することを検討している開発者
• BFFの設計や実装に興味がある方
• dart_frog 等のDartのバックエンド関連の技術に興味を持つエンジニア
• melos を用いてマルチパッケージ管理を楽にしたいエンジニア
• 実際のプロジェクトでの技術導入の経験談やノウハウを知りたい方

概要

アプリケーションを作る上でライフサイクルの管理は欠かせません。
しかしながらFlutterはEverything is a Widgetになっているため、既存のモバイルアプリのライフサイクルの概念にあてはめるには少し考える必要があります。
また最新のFlutter 3.13.0でライフサイクルの動作がどのように変わったのかを解説します。

このセッションでは以下の内容を想定しています。

• ライフサイクルとは
• WidgetsBindingObserver
  • Flutter3.13.0より前のライフサイクル
  • Flutter3.31.0以降のライフサイクル
• NavigatorObserver
  • Navigator Stackの動作説明(各種操作による変化)
• 具体的な実用例
  • どのようにWidgetsBindingObserverとNavigatorObserverを組み合わせるのか
  • 組み合わせることでどういったライフサイクルの管理ができるようになるのか
  • 実際のプロダクトの使用例を紹介

想定視聴者

• Flutterアプリのライフサイクル管理方法で悩んでいる方
• 既存のAndroid, iOSとのライフサイクルの違いで困っている方

概要

Flutterの人気に伴い、新規プロジェクトでFlutterを採用する企業も増えてきました。
しかし、その需要に対する供給（Flutterエンジニア）が追いついていないのが現状でしょう。
各社でも、Flutterエンジニア不足、育成に困っているのではないでしょうか？
Flutterが新しい技術だからこそ、有用な育成方法が定まっていないのではないでしょうか？
育成には研修課題を作成し、それをレビューするというコストがかかり、後回しにしてしまいがちだと思います。
本セッションではゆめみのFlutterエンジニア育成方法についてご紹介します。

・Flutter研修課題の内容
・全11Session
・状態管理（Riverpod）
・Unit,Widget Test,etc.
・レビュー時に利用する観点表
・Session毎のレビュー項目
・基礎的なレビュー項目

このトークではFlutterエンジニア育成の例を知ることができ、その結果として育成、レビューコストの削減に繋げることが期待できます。また、Flutterに興味を持つ技術者は、より高品質なコードを書くための知識や、採用の評価ポイントを掴むことができます。

想定視聴者

• Dart/Flutterに興味がある方
• Flutterエンジニアの育成に悩んでいる方々
• ゆめみのFlutter研修課題に興味のある方

概要

Flutter/Dart による開発を行う際、json_serializable や freezed に代表されるような、build_runner を用いたコード自動生成パッケージを利用している方は多いのではないでしょうか。

本セッションでは、既存の主なコード自動生成パッケージや、スピーカーが開発中のコード自動生成パッケージ flutterfire_gen を例に挙げながら、Dart のコード自動生成の内部の仕組みや、コード自動生成パッケージの自作方法について解説します。

主な内容：

• build パッケージによる build_runner と連携するビルドタスクの定義について
• source_gen パッケージが提供するコード自動生成の仕組みと、コード自動生成を容易にする各種機能について
• analyzer パッケージによるコード自動生成の対象となる Dart のソースコードの静的解析について
• dart_style パッケージによる生成されたコードの整形について
• 上記の説明を踏まえた、json_serializable や freezed のようなパッケージの内部の解説や、自動コード生成パッケージの作り方について

想定視聴者

• 普段使用しているコード自動生成の仕組みの中身を知りたい方
• コード自動生成パッケージを自作したい方

概要

このセッションでは普段あまり考える機会が少なそうなセキュリティの話をします。
Flutterで動くものを作りたい！というときに機能開発に目がいきがちで、しっかりとFlutterでのセキュリティを意識した開発を視聴者に意識付けることが目的です。
内容的には、弊チームで業務でFlutterアプリを開発するに当たって導入しているFlutterでのセキュリティ実装を紹介しながら、どのような対策を行えるかをセッションを通して考えていきます。
Flutterアプリを開発する上でCI周りでのセキュリティ面の話も少しできたらと思います。

• flutter_secure_storageを使ったローカルデータのセキュア化
• アプリの難読化
  • そもそもAndroid、iOSネイティブでの難読化
  • Flutterの難読化
• CI
  • CIツールにおける依存のセキュリティ対策
  • Flutterパッケージ依存のセキュリティ対策

想定視聴者

• Flutterアプリ開発経験のある人
• Flutterアプリのセキュリティについて興味のある人
• セキュリティについて興味がある人

概要

漫画アプリをFlutterで作成する機会が訪れました。
漫画のビューアでは画像を表示するだけでなく、拡大やページ移動、見開き表示など様々な機能に対応する必要があります。

このセッションでは、漫画ビューアでよく利用される以下の内容についてお話しいたします。

• Edge-to-edgeでの全画面表示
• UIの表示切替
• 画像表示および拡大表示
• 暗号化された画像の表示
• ページ対応のスライダー
• 見開きページの実現
  • ImageProviderの拡張
  • Isolateを用いた処理の並列化
  • 画像の連結

想定視聴者

• 漫画や電子書籍のアプリ開発に興味がある方
• 漫画ビューアのUI/UXに関心がある方
• 画像の扱いに興味がある方

概要

2023 年現在の Flutter アプリ開発において、「状態管理パッケージを使わない」 という選択肢は無いと言っても過言ではないでしょう。
GetX や BLoC, Riverpod と多くの選択肢がある状態管理パッケージですが、特に日本においては Riverpod が採用されるケースがほとんどだと思います。

しかし考えてみると、なぜすべてのアプリに必要な「状態管理」の仕組みに対して我々はサードパーティのパッケージをインストールする必要があるのでしょうか。どのアプリでも必要なのであれば、 Flutter 自体に標準で用意されていても良さそうに思えます。

このセッションでは、その「Flutter 自体に標準で用意されて」いる InheritedWidget や Provider などの「古い」状態管理手法を利用することの問題点と、それを解決する Riverpod のアプローチについて議論することで、状態管理パッケージの選定の際に確かな根拠を持って「このアプリには Riverpod が必要です」と言える状態を目指します。

想定視聴者

• Riverpod の基本的な使い方を知っている方
• Element の存在と役割をある程度知っている方

概要

Google I/O 2023でのnext-gen UIの発表や、2023年のFlutter Forwardでの3Dオブジェクトの描画に関する新機能の披露があり、Flutterで目を惹くUIデザインを実現する取り組みが加速しています。加えて、Flutter公式のハッカソンであるFlutter Clock ChallengeやFlutter Puzzle Hackの入賞作品のUIデザインはどれも魅力的なものでした。

しかし、こういった魅力的でユーザーの目を惹くUIデザインの実装にチャレンジしている方はまだ少ないのではないでしょうか。

このセッションでは、Flutterで目を惹くUIデザインを実現するための4つの手法を紹介します。

• RenderObjectのカスタマイズ
• Riveを用いた2Dアニメーション
• Fragment Shaderを活用したグラフィックスの描画
• Impellerを利用した3Dオブジェクトの描画

これらの手法を具体例をもとに、それぞれの実装方法や特徴を徹底解説します。

このセッションを通して、ユーザーを惹きつける洗練されたUIデザインのアプリを開発できるようになるでしょう。

想定視聴者

• 人とは違うUIデザインののアプリを作ってみたい人
• Flutterの描画の裏側に興味がある人