トーク

概要

Flutter 2.10でuseMaterial3プロパティが登場して以降、Flutter 3.0でさらに対応が進み、最近ではMaterial 3のアプリもよく見かけるようになりました。当時はコンポネントも未対応なものがありましたが、現在ではほぼ全ての対応が完了し2023年の4QにはMaterial 3がデフォルトとなる予定です。

本セッションでは現場での商用サービス経験を元に、Material 3の背景からTheme APIの活用事例、ダークテーマやDynamic Color対応によるパーソナライズ化の考え方など、包括的なThemeの活用についてお話します。

トピック

• Theme APIの実践
• ダークテーマ対応時に考えること
• Material 3とHarmonization
• Dynamic ColorとThemed App Icon
• 独自ColorSchemeの作成手順
• ThemeExtensionの活用方法

想定視聴者

• Theme APIやMaterial 3を正しく現場で利用したい方
• 効率的にダークテーマ対応をしたい方
• まだMaterial 3を利用したことがない方

概要

AIアプリの開発に興味がある方や作ってみたい方は注目
このセッションでは、FlutterフレームワークとTensorFlow Liteを使用してモバイル環境で機械学習アプリケーションを開発する方法と
MNIST（Mixed National Institute of Standards and Technology）を活用して、手書きの数字を分類するアプリを作成する方法を紹介します。

1.はじめに

• FlutterとTensorFlow Liteの簡単な紹介
  2. TensorFlow Liteとは？
• TensorFlow Liteの概要と特徴
  3. TensorFlow LiteとFlutterの統合方法
• TensorFlow Liteモデルの統合方法の紹介
  4. FlutterアプリケーションでTensorFlow Liteモデルを実行する
• FlutterでTensorFlow Liteモデルをロードして実行する方法。 推論結果を活用してUIに表示する方法。
  5. TensorFlow LiteとFlutterを活用した実戦例
• MNISTや画像分類やオブジェクト検出などの実践例の紹介

想定視聴者

1. AI Modelを使ってアプリを作りたい方。
2. TensorFlow やTensorFlow Lite に興味ある方。

概要

Flutter開発でDependency Injection(DI)に興味がある方は注目
Dependency Injectionはソフトウェアデザインのパターンの一つで、
オブジェクト間の依存関係を緩やかにし、柔軟性を高めるための技術です。
このパターンは、オブジェクト間の結合度を低くし、再利用性と保守性を向上させるのに役立ちます。

セッションはDependency Injection が難しい方のための内容を含めています。
基本から、FlutterでDependency Injectionを使用する方法について詳しく説明します。

1. DIについて
2. Flutter DI 基本
3. DI with get_it

想定視聴者

1. Flutter アーキテクチャに興味がある方
2. Dependency Injectionに興味がある方
3. Dependency Injectionを学びたい方

概要

Flutterでの開発では、テスト導入、アクセシビリティ対応が必要なプロジェクトも多いです。
しかしプロダクトの開発フェーズによって、必要がないプロダクトも少なからずあります。
今回の発表では、開発フェーズを軸に、テスト戦略、アクセシビリティ対応について話します。

内容

• 何をやるか!? 〜 Flutterアプリでのアクセシビリティ対応 〜
• どこまでやるのか!? 〜 E2Eテスト(自動テスト)の導入と運用戦略 〜
• どうやって使うのか!? 〜 VRT(visual regression testing)導入と運用戦略 〜

これらの3テーマを開発フェーズを軸にメリット、デメリットを踏まえて話します。
また「導入方法」や「テスト戦略」、「技術選定」、「実際に導入した結果」についてもお話しさせていただきます。
※実際の開発における経験に基づいてお話しさせていただきます

本稿では、開発の生産性向上やプロダクトの品質向上を目的としたテーマです。

想定視聴者

• FlutterにおけるE2Eテストに興味がある方
• Flutterにおけるアクセシビリティに興味がある方
• FlutterにおけるVRTに興味がある方
• テスト導入やアクセシビリティ対応を検討中の方

概要

AWS Amplify ではモバイルアプリ開発者からバックエンド開発者、 そしてスタートアップからエンタープライズまでビジネスの規模や開発者のロールに依存せず、 アプリケーションの開発を加速するためのサービスです。
このセッションでは、AWS Amplify と Flutter を使用したモバイルアプリ開発や、認証と認可、他の AWS サービスとの簡単な統合、スケーラブルなバックエンド リソースを迅速に作成できる機能など、AWS Amplify を Flutter と組み合わせて使用​​する利点について説明します。
また、GraphQL API、リアルタイムのデータ同期、プッシュ通知など、Flutter で使用できる AWS Amplify の主要な機能についても説明します。さらに、実際の例を使用して AWS Amplify と Flutter を統合する方法を示します。
講演の最後には、参加者は AWS Amplify を活用して、Flutter を使用して機能豊富でスケーラブルで安全なモバイル アプリケーションを構築する方法を明確に理解できるようになります。

想定視聴者

• AWSを使って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での課金実装方法について知りたい方

概要

• スケーラブルなFlutterアプリのレイヤー構成を丁寧に説明し、実演します。

想定視聴者

• Flutterを触り始めたは良いもののどういう風に作り上げれば良いのか分からない方
• Riverpodを使うのがなんとなく良さそうに思うけど、その後の手が動かせない方
• 猫の手も借りたいくらいにレイヤー構成に悩んでいる方

説明

YOUTRUSTアプリはflutter createを実行してから、今年で3年が経ちました。
ご愛顧いただいている方々、本当にありがとうございます。

Flutterは当時1.x.xでした。

FlutterやDartが目まぐるしく進化を遂げる中、
YOUTRUSTアプリはレイヤー構成を一貫して保ってきました。
言い換えれば、小規模アプリから中規模(大規模？)なアプリまで使える構成ということです。

• フォルダ構成
• レイヤー紹介
• どうして今のレイヤー構成になったのか
• 各レイヤーの役割
• 時間があれば、Live Coding

概要

大学でパチンコ、タバコ、酒、麻雀、バンドしか履修しなかった現在無職のフリーターが何の知識もなくプログラミングを独学で学び、
flutterで実務経験を手に入れるまでの苦労や感動涙なしでは聞かれないロードストーリーをお届けします。

具体的な以下の内容をお話しします。

• プログラミングを始めたきっかけ
• 独学での学び方
• 苦労したこと
• 実際に作ったもの
• 就職活動のやり方

想定視聴者

エンジニアを目指すすべての人

概要

アプリにおいて正常に処理が完了しないときに適切なエラーメッセージを表示することは、適切なユーザ体験とサポートコストの軽減につながります。またエラー処理は多くの画面で同じような処理になることが多いので、使い回し可能な部品にすることは開発者体験の向上につながります。このセッションでは以下の内容で、Flutterアプリでのエラー処理の設計と実装例をソースコードと併せて解説します。

• なぜエラー処理の設計が大事かを、スマホアプリのデリバリー特性から解説
• エラーを分類する
  • ネットワークエラーなど、ユーザに原因があるので、ユーザが対処できる
  • サーバエラーなど、サービス提供元に原因があるので、ユーザは待つことしかできない
• サーバサイドエンジニアとモバイルアプリエンジニアでエラー処理の認識を合わせるためのドキュンテーション事例
• エラーの表示方法
  • Scaffold上のコンテンツ、AlertDialog、Toastのどれで表示するかを、material.ioを参考にして考える
  • バリエーションエラー(テキストフィールドへの入力間違い)の表示方法
  • ネットワークエラーの場合は再読込可能にする
• 使い回し可能なエラー処理部品の実装例

想定視聴者

初めてサービスのスマホアプリを開発する人

概要

今年の4月から新卒として入社し，内定者インターンと実務を含めて1年弱ほどFlutter開発を経験しました．
内定者インターン期間中にはFlutter学習のために画面数の少ない小規模なアプリを開発していましたが，入社してからの実務では画面数も多く，遷移も複雑なアプリを触ることになり，苦労することが多々ありました．
このセッションではその中で特に触ることが多かった画面遷移周りの技術を中心に，実務でつまづいた点をお話しします！

•Flutter画面遷移周りの技術
◦ Navigator 2.0
◦ go_router
•Navigatorの実務でつまづいた点
◦Navigator.pop()とNavigator.of(context).pop()の違い
◦複雑なダイアログ表示での意図しない挙動
•go_routerの実務でつまづいた点
◦パスをどう構成するか
◦ BottomNavigationBarの画面遷移(StatefulShellRoute)

想定視聴者

•Flutterをこれから始めようと思っている人
•Flutter初心者
•Flutterの画面遷移に興味がある人

概要

既存のアプリをFlutterに置き換える際にいきなり全画面をFlutterに置き換えるのは難しいと思います。
その際一部の画面をFlutterに置き換えて既存アプリからFlutterを呼び出せるAdd-to-appが必須になります。

本セッションでは、Add-to-appを2年ほど運用した視点からの知見や起きた不具合などを紹介します。

• Add-to-appの仕組みと導入方法
  • Option A, B, Cのどれを採用したか、その理由
• Flutterの画面数が増えた時の対応
  • MethodChannelの使い方
• 2年間で起きた不具合とその対応
  • CIやiOSライブラリ競合など

想定視聴者

• 既存アプリにFlutter導入を考えている方
• Add-to-appを利用したことない方

概要

Flutterは、1ソースで複数PFのUI・ロジック・テストを共通化できる非常に便利なフレームワークです。

しかし、各PFのネイティブ実装経験者（※1）の中には、「OS固有のAPI（※2）を用いてリッチな体験を実装したい場合、Dartで書いたAPI通信・DB利用・ビジネスロジックなどを一部再実装しなければいけないのでは？」と思ったことはないでしょうか？
(※1) Swift+SwiftUI, Kotlin+Jetpack Compose, etc…
(※2) Push, Widget, Share, etc…

本セッションでは下記アジェンダを元に、Dartで書いたコードをあらゆるケースで活用し、必要なネイティブ実装を最小化する方法をご紹介します。

• MethodChannelを用いたFlutter⇄ネイティブ間の連携
• Plugin/Packageを活用した効率的な実装
• FlutterEngineを使って、ネイティブ実装からFlutterをAPIとして呼び出す方法
• 本体アプリとは別のプロセス（AppExtension）でもFlutterの実装を呼び出す方法

想定視聴者

• Flutterでもネイティブ実装と同じレベルの体験を効率的に作りたい方
• iOS/Androidのネイティブ開発が得意だけど、OS固有のAPIを効率的に扱う方法がわからない方

概要

このセッションではソースコードを抽象的な構文構造としてツリー状に表現するAbstract Syntax Tree（AST）について紹介し、それをDartで扱う方法を紹介します。
また、DartでASTを活用した事例として codemodパッケージを紹介し、大規模な業務コードを一括で機械的にリファクタする例やCustomLintを作成する例などを紹介します。

• Abstract Syntax Tree（AST）について
• DartでASTを扱うためには
• DartでASTを活用した事例
  • リファクタ
  • CustomLint
• まとめ

想定視聴者

• Flutterアプリ開発経験のある人
• analyzerやコード解析に興味がある人

概要

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

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

想定視聴者

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

概要

このセッションではFlutterで動画を再生させる技術について、Flutter Communityで開発されているvideo_playerを通して話します。
video_playerの構成や使える機能などの紹介はもちろん、動画という各ネイティブ独自の機能を呼び出すときに考えなければいけない難しい部分についての話も行います。
また、さらにvideo_playerの実装内容を深く理解してもらうために自分でvideo_playerを拡張する例をタイムシフト再生機能の追加を例に話す予定です。
時間があれば最低限必要とされるHLSの説明を入れる予定です。

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

想定視聴者

• Flutterアプリ開発経験のある人
• AVPlayer、ExoPlayerに触れたことのある人
• Flutterの動画再生に興味がある人

概要

このセッションでは、Flutterとネイティブアプリ開発の境界について深く掘り下げます。FlutterがどれほどのパフォーマンスやUI/UXをネイティブに近づけることができるのか、またどのようなケースでネイティブのアプローチが適切であるのかを詳しく議論します。実際のユースケースやデモを交えながら、開発者がどの技術を選択すべきかの指針を示します。

セッションの内容

• Flutterの概要とその特徴
• Flutterのパフォーマンス: ネイティブとの比較
• UI/UX: Flutterでの実装可能性とネイティブとの差異
• ネイティブとの連携: プラグインシステムやネイティブコードの統合
• まとめ: あなたのプロジェクトにとって最適なアプローチは?

想定視聴者

• Flutterに興味を持っているが、ネイティブアプリ開発との違いや限界を知りたい開発者
• すでにFlutterを使用しているが、ネイティブとの境界や連携についての知識を深めたい開発者
• アプリ開発プロジェクトの方針を決めるための情報収集をしているプロダクトマネージャーや技術リーダー

概要

私はSwiftUIを使って1年近く個人アプリ開発を行った後, 昨年の4月からFlutterアプリの開発インターンを始めました.
この過程で, Flutterフレームワークの書き方がSwiftUIと比較してネストが深くなりがちで読みにくさを感じることがありました.
特に今年の4月からは, 比較的大規模なアプリの実務開発に取り組むようになり, 複数の異なる要素が混在する画面や条件による要素の出し分けが必要な画面で, この問題が顕著に現れるなと感じています.
このセッションでは, こうした状況で可読性を高く保ちながら開発を進めるために, 私が意識しているポイントや個人的なアプローチ, 実務で役立てているTipsを共有します.

• Flutterの可読性（他の宣言的UIフレームワークとの比較）
• Widgetの切り分け
• パッケージの活用
• WidgetExtension
• その他Tips

想定視聴者

• Flutterコードの可読性に悩まされている方
• これからFlutter開発を始める方

概要

今年の初めに、弊社で開発しているアプリをSwiftからFlutterへとリプレースしました。
そして、この内部的なシステム刷新はユーザーにとって一切無関係のお話です。
なので、ユーザー視点でリプレースによるアプリの更新を考えると、「いつも通りアプリをただ更新した」という事実で済まさなければなりません。
更新した際に「ログアウトされている」、「設定していた情報が消えている」などのユーザー体験を損なうことが起きればミッション失敗です。
それを防ぐためには適切なマイグレーションによって、Swiftで保持しているローカルデータをFlutterへ正常に引き継ぐ必要があります。

決死の思いで無事故を達成したマイグレーション戦略をご紹介します。

今回マイグレーションの対象とするローカルデータは、
「セキュア情報を保持するKeyChain」と「ユーザー設定情報を保持するUserDefaults」です。

紹介する内容の補足

リプレースにおけるマイグレーションのお話だけではなく、
「Flutterでの可用性と整合性を考慮したマイグレーション機構の設計」についてもご紹介します。

想定視聴者

• Flutterにおけるローカルデータのマイグレーションに興味がある人
• iOS/AndroidをFlutterへリプレースしようと考えている人

概要

FlutterのIntegrationテストは、時に煩雑であり、また、WebViewや通知ダイアログ等のネイティブが関与する場合には、これらネイティブ機能に対応できず失敗してしまいます。

そんな問題を解決するために、Patrolが開発されました。

Patrolは、LeanCode社が開発したFlutterアプリのテストのためのOSSフレームワークです。Patrolを使用すれば、DartでUIテストを簡単に書くことができます。さらに、Flutter公式パッケージでは対応が難しいネイティブサイドとの対応も可能です。また、Firebase Test Labを使用し、多数のデバイス上でE2Eテストを実行することもできます(Flutter未対応)。

このセッションでは、既存ソリューションの課題から始め、Patrolを活用したWidgetテストやIntegrationテストの実例を通じて、Patrolの機能とその有用性を解説します。Flutterプロジェクトのテスト自動化を進めたい方、また品質向上を目指す方にとって、このセッションは有益なものになるはずです。

想定視聴者

Flutterプロジェクトの品質を高めたい方
FlutterプロジェクトにE2Eテストを追加したい方
integration_test に疲れた方
Patrolについて詳しく知りたい方

概要

Riverpodは多くのFlutter開発者に支持されている状態管理ライブラリです。その中で、開発を助けるためのツールとして提供されているのが、 riverpod_lint というLintパッケージです。
riverpod_lint は custom_lint を使用して作成されています。これは一般的なRiverpodの問題を予防し、繰り返しのタスクを単純化する目的で設計されています。

本セッションでは以下のトピックをカバーします：

• Custom Lintの基本的な概念
• riverpod_lint によるRiverpodの使い勝手の向上
• riverpod_lint 導入に伴うRiverpodの進化 - Notifier、Riverpod Generatorの概要
• riverpod_lint の背後にある思考や実装の考察

特に4点目の考察に関しては、私がRiverpodへ貢献した際の経験を元にしたものであり、これは公式な見解や作者の意図を示すものではありません。私の解釈や経験を元にした異なる視点からの洞察を提供することを目指しています。

想定視聴者

• Custom Lintに興味を持っている方
• Riverpodの内部や設計について新しい視点で知りたい方
• 将来的にRiverpodにcontributeしてみたい方