SliverAppBarはスクロールに応じて大きさが変化したり、スクロールを中断時に出現したりするAppBarのWidgetです。
ちょっとリッチなスクロールを実装する際に利用するこのWidget、
どうしてこのような動きが実現できるのでしょうか?
SliverAppBarを題材に、FlutterのSliverの中身を深掘りして解説します。
また、Flutter 3.24で追加されたPinnedHeaderSliver、SliverResizingHeaderについても、中身を解説します。
具体的には以下の内容について解説します。
Flutterでのスクロール画面でのエラーに対し、
CustomScrollView、Sliverの利用はよく採用される解決策です。
今回の発表を通してSliverへの理解を深めていただき、
開発力の向上の一助となればと思います。
ある日,チームメンバーから『普段使っている他のアプリと比べてな〜んか使い心地が悪い…😅💦』という声が上がりました.
アプリが数多く存在するこの時代,『なんか使い心地が悪い』とユーザはすぐ離れていってしまいます.これは大問題です.なんとかしなくては…!
具体的には,以下のような使い心地の悪さの声が上がりました.
そこで,このセッションでは以下のトピックについてお話しします.
本セッションでは、Dart Frogを活用したWebSocket通信の実装方法を詳しく解説します。
WebSocket通信の実装には、接続管理、エラーハンドリング、再接続ロジックなど、考慮すべき点が多岐にわたります。また、Dartの非同期処理と組み合わせる際の適切な実装方法や、パフォーマンスの最適化も重要な課題です。
そこで Dart Frogの特徴や利点を紹介し、WebSocket通信の実装手順を step by step で説明します。さらに、実装上の注意点や最適化テクニックを共有し、効率的で信頼性の高いWebSocket通信を実現しましょう。
・Flutter でゲーム開発する際に Dart で websocket サーバーを実装したい開発者
・Dart Frogを使ったバックエンド開発に興味がある開発者
真心を込めて開発したアプリがカクついたときのショックは、今でも忘れられません。
アプリがスムーズに動かないとき、あなたなら何から始めますか?どこから修正しますか?リビルドの回数を減らすために const を使ったところ、カクつきが改善されました。でも、リビルドの回数は何回から何回に減少したのでしょう?パフォーマンスを改善する際には、推測に頼るのではなく計測をしてボトルネックを特定することが重要です。
本セッションでは、UIパフォーマンス計測の入門として、DevToolsに注目します。DevToolsは、Flutterアプリのパフォーマンス計測には欠かせないツールです。特に、フレームレートの監視、ジャンクやスクロールヒッチの検出、ウィジェットのリビルドの計測、メモリの割り当てとCPU使用率の分析に焦点を当てます。そして、サンプルプロジェクトを使って実際にUIパフォーマンスを計測し、問題の原因を特定し、一つずつ改善していきます。
UIパフォーマンスの問題により、描画が乱れたり、操作が遅くなったりすることは珍しくありません。そんなときでも焦らず計測し、ボトルネックを特定し、問題を解消するための実践的な方法を、デモを交えて紹介します。
スムーズで快適なアプリをユーザーに届けたい方
根拠を持ってUIパフォーマンスの改善をしたい方
ここに、野菜のリストがあります。
[にんじん, じゃがいも, たまねぎ, ブロッコリー]
あなたなら、緑色の野菜だけを選ぶにはどうしますか? それぞれの野菜をサラダ用にカットするには? 野菜の重さを合計するには? 空のコンソメスープに各野菜を追加するには?
これらの操作を簡単に実現できるのが、Dartの高階関数です。高階関数は、関数を引数や戻り値にとる関数のことです。Dartでは、map・where・reduce・foldなどが Iterableクラスのメソッドとして定義されています。これらを使うと、for文よりも簡潔で柔軟なコードが書けます。
本セッションでは、野菜を例に、Iterableクラスに定義された高階関数を直感的に理解することを目指します。また、具体的なケースで高階関数を使う場合と使わない場合を比較し、コレクション操作が簡潔で明瞭になることを体感します。さらに、Dart SDKの内部実装を参照して、Iterableクラスのメソッドの動作をより深く理解します。これにより、高階関数へのハードルが下がり、Dartでの開発がさらに楽しくなるでしょう!
Dartの高階関数にハードルを感じている方
Iterableクラスの内部実装に興味がある方
野菜が好きな方
Flutterアプリケーション開発の核心となるのは、WidgetとPackageです。これらを深く理解することで、あらゆる開発課題に効率的に対応できるようになります。
本セッションでは、YouTubeで公開されている「Flutter Widget of the Week」や「Flutter Package of the Week」シリーズの内容からピックアップしてFlutterのWidgetとPackageについて解説します。
参加者の皆様は、Flutterの基本的な要素を再確認しつつ、新たな視点や活用法を学ぶことができます。WidgetとPackageの理解を深めることで、より効率的で創造的なFlutter開発のスキルを身につけることができるでしょう。
本セッションは、以下の方々に特におすすめです:
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 中級者以上
地下鉄や長時間のフライトなど、通信が不安定な状況でもアプリが快適に動作することが求められています。
このニーズに応えるには、オフラインでのデータキャッシュが不可欠です。
特に、大量のデータを扱うアプリでは、データベースの選定がパフォーマンスに大きな影響を与えます。
本セッションでは、学習用APIであるPokeAPIを活用し、sqfliteやobject_boxなどのデータベースを比較します。
それぞれの読み書き速度やリアルタイム検索の実装方法を解説し、オフライン環境でもスムーズに動作するアプリの実装手法を紹介します。
さらに、オフラインからオンラインに復帰した際のデータハンドリングについても触れます。
このセッションで学べること
多くのFlutter開発者が直面する課題の一つは、標準コンポーネントでは対応できない高度なUIニーズです。私たちのプロジェクトでも、動画のスライダーをカスタマイズする必要に迫られ、標準のSliderコンポーネントでは対応できない要件に直面しました。その結果として、CustomPaintを活用して独自のスライダーを実装することにしました。
このセッションでは、CustomPaintの基本から始め、高度なカスタム描画を行うためのベストプラクティスと実際のパフォーマンスについて深掘りしていきます。
このセッションの内容は以下の通りです:
Dartでは、非同期処理と並行処理を効率的に行うためのキーコンポーネントとしてIsolateが提供されています。
特にFlutterアプリケーションのパフォーマンス向上やレスポンス性の向上において、Isolateの正しい理解と活用は非常に重要です。
このセッションでは、DartのIsolateの内部動作を深く掘り下げ、どのようにしてメモリを共有せずに並行処理を実現しているのかを解説します。また、実際のアプリケーション開発における典型的な使用例とベストプラクティスを紹介し、皆さんのコード品質を一段階上げる手助けをします。
このセッションの内容は以下の通りです:
想定視聴者:
2025年8月にFirebase Dynamic Links(FDL)のサービスが終了することが発表され、多くのアプリ開発者がAdjust、AppsFlyer、Bitly、Branch、Kochavaなど代替ソリューションの選定を迫られています。
本セッションでは、実際のプロダクトで行ったFDLからAdjustへの移行作業を通じて、FDLの主要な機能をカバーしつつ、Adjustを用いたディープリンクの設定方法、ディープリンク機能の実装例、分析に不可欠なログの実装方法、およびパーソナライズされたユーザー体験を提供するための戦略とその制約を紹介します。
これにより、FDL終了後のアプリ開発において、どのようにスムーズな移行を実現し、必要な機能を維持するかについて、明確な指針を提供します。このセッションを通じて、ディープリンク技術がどのようにアプリの成長と成功を支えるかを理解し、実際の開発に役立つ知識を提供します。
Flutterアプリの国際化(i18n)にはさまざまなアプローチがありますが、プロジェクトの要件に応じた最適なソリューションを選ぶことが重要です。私たちのプロジェクトでは、複数の言語や地域に対応するために、i18nソリューションを慎重に選定しました。その中で、ファイル管理の柔軟性、型安全性、そしてYAML形式のサポート等を重要視し、最終的にslangというパッケージを導入することに決定しました。
このセッションでは、私たちがslangの導入に至った背景や、その具体的な利点についてお話しします。18nのソリューションを検討する際に役立つ情報を提供し、プロジェクトに最適なアプローチを見つける手助けとなることを目指します。
• Flutterアプリの国際化に関心があるエンジニア
• i18nパッケージの選定に関心がある方
• type-safeなコード生成に関心がある方
「フォーム」を取り扱うアプリの機能実装は、考慮すべき点が多岐に渡り、難易度が非常に高い部分です。
例えば、商品注文や申請作成の入力画面は、単純な入力画面とは性質が異なり、複雑な仕様の中でミスができない実装が求められます。
そこでは、高度なバリデーションや、複数ソースからの動的なデータ取得・更新など、「複雑なロジックをフロントで実装する必要がある」点で多くの課題が存在します。
Flutterの活用は、開発効率を上げる有効な手段の1つですが、単に導入するだけでは上記課題は解消しきれません。
本トークでは、複雑度が極めて高いフォーム開発を、宣言的かつ型安全に保つことで、効率的に実現する方法をご紹介します。
トピック
このセッションでは、プレーン Flutter API を使って、MVVM アーキテクチャと簡単な状態管理や依存性注入を作り、仕組みの基本を知ってもらい、
これらのキーポイントを知ることで、要件仕様書を満たし、機能の追加や振る舞い変更も、処理フローのテストもしやすい実装作りを説明します。
仕事や自分でアプリを作るにも、 「このボタンを押したら、サーバからデータを取得して画面のここの表示が変わる」などから、
「必要なライブラリなどの要素技術を選択して、どんな入力で、どんな関数やフローで、どんな出力やエラーを期待するか」の要件仕様書ができます。
ですが要件仕様書を愚直に Widget に実装すると、神Widgetが誕生してしまうので、
一般的に MVVMで、Clean Archtecture に則り、View はデータの表示に徹し、ViewModel はデータ(状態)の提供と更新に徹し、
状態管理ライブラリで、状態更新された View のみの表示更新①、DI/依存性注入ライブラリで、テストコード①②を実装しています。
①Riverpod/GetItは、MVVM 専用ではありませんから、実装コードには工夫が必要!
②テストする関数やフローの実装を変えず、依存するデータや状態をテストダブル(モックオブジェクト等)にすり替えます。
初心者から中級者
Dart から Kotlin へコードを移植した際、特定の条件下でアプリがクラッシュする事態に直面しました。このクラッシュは Android 版でのみ発生し、 iOS 版では問題ありませんでした。一見、 Dart、 Kotlin、 Swift で同じ Int 型を扱っているように思えましたが、その内部実装は異なり、型の変換処理を単純に移植することができないことが明らかになりました。このトークでは、クラッシュの原因を掘り下げるとともに、言語ごとの型の違いを考慮した適切な移植方法について解説します。
このセッションではFlutter創設メンバーであるEric Seidelらが手掛けているサービスのShorebirdについて話します。
モバイルアプリの更新はWebアプリとは異なり、各プラットフォームのストア審査を通過する必要があり、時間と手間がかかります。
特に、ユーザーの手元で発生している不具合対応のアップデートが必要な状況では、この審査プロセスが迅速なリリースの障害となることがあります。
Shorebirdを使えば、AndroidとiOSアプリをストアの審査なしで素早く更新することが可能になります。
セッション内では実際にコードの修正を行い、ストアを経由せずにアプリを更新するデモンストレーションを行う予定です。
このセッションでは、mix
というスタイル設定システムをご紹介します。
mix
は、シンプルかつ直感的にスタイルを作成、結合、適用できるシステムで、共通スタイルの管理運用がしやすくなります。
具体的には、mix
を用いて簡単にスタイルを定義し、標準のFlutterスタイルシステムと比較しながら、その利便性を紹介します。
mix
に興味がある方WebViewの実装は、多くのFlutterエンジニアが経験するものの、その詳細についてはあまり深く理解せずに使っていることが多いのではないでしょうか?
このトークでは、Flutterアプリ開発でよく利用される webview_flutter ライブラリについて解説を行います。
単なるWebの描画に留まらず、多様な処理をハンドリングすることで、WebViewでも高度な機能を実現できることを目指します。
自分自身が開発で直面した課題やハマりどころを中心にご紹介できればと思います。
このセッションでは以下の内容を想定しています。
本セッションでは、FlutterとDartを活用した総合チケット管理システムの開発経験を共有します。
Flutter/Dartのクロスプラットフォーム対応の強みを最大限に活かし、Webサイト、モバイルアプリケーション、バックエンドを一貫して開発した経験を共有します。
(注:本プロジェクトは進行中のため、詳細は変更の可能性があります)
AwarefyではローカルキャッシュのためのパッケージをHIVE→Isar→Floor(sqflite)という流れで置き換えてきました。ローカルキャッシュを実装する上でのキャッシュ戦略について、Floorでの実装を交えながらお話しします。