トーク

概要

FlutterはUIフレームワークとして2次元での画面構成に特化していますが、表示するデータによっては3次元で可視化した方が望ましいものもあります。例えば自動運転に用いられるLiDARというセンサーは毎秒数十～数百万点もの測定データを生成します。このような大規模3次元データの可視化にFlutterを利用できないか、と考え実際に動作するViewerを作るために必要となったライブラリやDartの仕組みを解説・紹介します。主にDesktopを対象としています。

予定している内容：

• 大規模点群データの表示方法の比較(canvas、flame、flutter_gl等)
• GB単位のデータの読み込みと処理(Dart SIMD、rust bridge、typed_data等)
• flutter_glの内部処理について

想定視聴者

• Flutterで3次元データを扱いたい人
• dart:ffiやTexture widgetの活用例を知りたい人

概要

レシピサービスであるE・レシピは、2015年にネイティブ実装のiOS/Androidアプリが登場しました。現在、Flutterを採用してリビルドを進めています。

本セッションでは、ネイティブ実装のiOS/AndroidアプリをFlutterでリビルドを行った事例を紹介します。Flutterを採用した所感や課題、気づきをお話しします。

セッション内容（予定）

• Flutterを採用した経緯
• UI構築の知見
  • CustomScrollViewで複雑な画面に対応
  • タブUI (TabController, TabBarVIew)
  • 入れ子のスクロールを持つUI (SliverAppBar + NestedScrollView)
• Riverpod + Freezed + MVVMアーキテクチャのふりかえり
• Flutterリビルドの良かったこと
• Flutterリビルドで感じた課題
  • WebView
  • OS依存のUI部品

想定視聴者

• ネイティブ実装をFlutterに移行を検討するモバイルアプリ開発者
• これからFlutter開発を始める方

概要

Flutterは標準でテストパッケージ群を用意しており、単体テスト、ウィジェットテスト、インテグレーションテストという3つのカテゴリのテストをそれぞれ適量作ることを推奨しています。

その一方で、Flutterのintegration_testパッケージは、ネイティブのUI要素(例えば、位置情報の許諾ダイアログ)を操作できない問題があります。この問題を回避する方法の1つとして、AppiumというE2Eテストツールがあるのですが、初期のFlutterはネイティブなテストツールとの相性も悪く、Appiumでうまくテスト自動化できない問題も抱えていました。

しかしながら、Flutter 3.0の登場や新しいE2Eテストツールの登場により、FlutterアプリのE2Eテストツール環境はここ1年で大きく改善されました。本セッションでは、こうしたFlutterアプリのE2Eテストツール事情と、E2Eテスト自動化の有力な候補となる様々なテストツールをご紹介します。テストツールの得意不得意や、どのツールを選ぶべきか、うまく自動化を行うために必要なFlutterアプリ実装上の注意点についてもお話したいと思います。

想定視聴者

• ネイティブ部分を含めたE2Eテストの手段を探している方
• どのツールでモバイルのFlutterアプリのE2Eテストを自動化すればいいか迷ってる方

概要

・なぜFlutterを採用したのか。
・Fllutterを理解（学習）するためのモック作成
・サーバーサイドエンジニアが不在のため、サーバーに変わるサービス選定
→FirebaseAuthやFirestore、AWS S3
・実装してて大変だったことや、Androidエンジニアの経験が活かせる箇所
・AppStoreとAndroidエンジニアの相性はあまり良くない（iOSエンジニアに助けてもらった）

想定視聴者

Flutterでの開発経験がない方
AndroidエンジニアでiOSアプリもリリースしたい方

概要

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

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

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

想定視聴者

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

概要

Bitkeyでは、スマートロックをはじめとする組込み製品のQAにFlutterを用いたテスト用アプリを内製しています。
このアプリではスマートフォンとデバイスの間の通信に用いるBLE接続を、
Swift/Kotlinで開発したコネクションプールで管理して再利用できるようにしています。

このセッションでは、BLEのコネクションプールのプラグインを開発する中で必要になったアイディアやテクニックを紹介し、
「こんなプラグインって作れる？」という疑問を解消できればと思います。

• 開発中のリスタートに対応して安全にリソースを管理する
• キャンセル可能な非同期処理を提供する
• Dartの関数をプラグインに登録してネイティブコードから呼び出す
• プラグインのコードにアプリのSwift/Kotlinのコードからアクセスする

想定視聴者

• Flutterとネイティブの実装をつなぐプラグインを設計しようとしている方
• ネイティブの資産を流用したFlutterでの開発を検討している方

概要

Android/iOSでのFlutterは経験しているが、Flutter web未経験の私が3ヶ月でwebビルドしてリリースまで実装した内容をご紹介します！
モバイルとの共通点・相違点、Flutter webならではの考慮しないといけない点や工夫した点などを重点的にお話し、
Flutter webならではの他のweb技術との違い、ツラい点も交えてご紹介します！

3ヶ月という短い期間かつIT初心者やFlutter未経験者が多い中で、チームとしてのプロジェクト運営、
リリース、改修までの流れをご紹介できればと思います！

想定視聴者

Flutter初心者の方
Flutter web初心者の方
Flutter触ったことあるけどMobileのみの方
チーム運営に興味のある方

概要

現在、Flutterで作られた多くのアプリケーションにFirebaseをはじめとするmBaaSが使用されています。

そんな中、突然姿を現したServerpodというオープンソースフレームワークにより、Dartにおけるバックエンド開発の可能性が広がりました。
Serverpodは、Dartで記述されたサーバー側のソースコードを分析し、クライアント側のソースコードを自動で生成できる他、認証機能などもサポートしています。

本セッションでは実際にServerpodを使用して気づいた利点や将来性などについて話します。

想定視聴者

・Flutter,Dartを使用した開発経験がある方
・Dartでのバックエンド開発に興味がある方
・Serverpodを触ったことはないけど気になっている方

概要

サイドプロジェクトを開発する際、データを集める必要があり、AirPodsのセンサーにアクセスしたかったので、このパケージを作成しました: 
https://pub.dev/packages/flutter_airpods
イベントチャネルでデータを集めて、アプリの中で処理しました。
今年のFlutterForwardのイベントで初めてffigenを知りました。
FFIGenを使えば、たくさんの開発時間を節約出来たと思います。
FFIGenでネイティブ機能を取り出し、バインディングを作成することで、Flutterの中からアクセスすることが出来ます。
このスピーチでは、私の例を通してffigenの紹介をします。

想定視聴者

このスピーチは主にネイティブを使用する開発者向けですが、他のプログラミング言語に興味がある方にも興味深いかもしれません。

概要

Flutterのwebをリリースして以来、多くの人々は使い道に混乱しています。
Flutterのwebは、主にウェブサイトではなく、ウェブアプリのために作られました。
しかし、コミュニティーからの様々な解決方法によって、その問題は解決しています。
このスピーチはFlutterエレメントエンベディングという新しい機能で、その利用方法やメリット、課題について詳しく説明します。
そして、jasprというフレームワークについても紹介します。
jasprはreact,vueのようなフレームワークですが、dartで使います。
このスピーチの中で、flutterとjasprのエレメントエンベディングも比べています。
では、一緒に新しいflutterのweb方法を調べてみましょう。

想定視聴者

このスピーチの対象は、主にflutterのwebに興味を持っている人々です。
更に、チームリーダーにとっても重要な決定を下すときに役に立つかも知れません。
また、インディーデベロッパーは、自分のホームページでflutterのアプリのプレビューを表示することが出来ます。

概要

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

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

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

想定視聴者

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

概要

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

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

主な内容：

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

想定視聴者

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

概要

PocketChange では、主力のサービスPokepayにおいて、各種製品のフロントエンドにFlutterを採用しています。
採用の経緯や、良かった点、苦労した点、「スマホアプリの『貧者のツール』」としてのFlutterを超えた可能性の話をします。

主に、以下の3つの可能性の話をします:

• 全国で数百台ほど稼働しているキオスク端末でのFlutter。機材の構成やアプリの作り方、ライブラリ等について。ハードウェアUIの可能性の話をします。
• 新サービスのスマホアプリでFlutter。iOS/Androidを統一するフルスクラッチのUIをFlutterでどこまで実現できるか、まだ至らぬ点など。フルスクラッチUIの可能性の話をします。
• 新サービスのテナント向けのノーコード自動生成のPWAアプリでのFlutter。Flutter Web の実用性、パフォーマンス、WebPush通知周り、アプリ生成の可能性の話をします。

想定視聴者

• 自作のハードウェアのUIをつくる事になった、Web系/スマホアプリ系エンジニアの方。
• スマホアプリでオリジナルなUI/UXを追求したいが、Flutterはそういうのには向かない、と思っている方。
• Flutter Web ってどれだけ実用的なの？落とし穴は？効果的な使い所は？ と気になっている方。
  など。

概要

Flutterでアプリを開発する際に、バックエンド側はmBaaSを導入されるケースがよくあると思います。
よく利用されるFirebaseをはじめ、近年ではRDS(PostgreSQL)が利用できるSupabaseも注目されています。
そんな中、去年登場したAppwriteというセルフホスティングが可能なmBaaSが登場しました。

本セッションでは、Appwriteのサービス説明やFlutterで取り込むための記述方法を解説します。

想定視聴者

• Flutterでの開発経験のある方
• Firebase等のmBaaSを利用したことがある方

概要

Flutterでアプリケーションを開発する上で必須のコマンド整理術を紹介します。

想定視聴者

• Flutterアプリ開発においてコマンド整理をしたい方

説明

Flutterでアプリ開発をしていると、日々多様なコマンドを打つ機会があります。そして、たとえばfvmを使用したり、flavorをわけるようになったり、mainファイルを環境ごとに分割したりとしていくようになり、コマンドが徐々に長くなり手で打つには困難な長さになってきます。

そのため多くのプロジェクトでは、コマンドをうまく整理する術が必要になってきます。
makeファイルをつくったり、シェルスクリプトを作って整理することが多いのではないでしょうか。
自分の場合は、ここに fastlane を選択しています。fastlane を使用することで、 下記のように fastlane {プラットフォーム} {アクション} のフォーマットで簡潔にコマンドを整理することができます。

• fastlane flutter lint
• fastlane flutter test
• fastlane android deploy_beta
• fastlane ios deploy_beta

当セッションでは fastlane を使用するメリデメ、上記の環境を作る手順を紹介します。