Liquid Glassで薬カレンダーアプリを作ってみた感想
クロスマート テックアドベントカレンダーの12/18の記事です🎄
前回の記事では Liquid Glass を使って遊んでみましたが、今回は実際にリキッドグラスデザインを採用した「薬カレンダーアプリ」を開発しました。
liquid_glass_renderer パッケージを使い、ガラスのような透明感と液体のような柔らかな動きを表現しています。
| ホーム | カレンダー |
|---|---|
 |
 |
はまりどころ1: パフォーマンスの重さ
リキッドグラス効果は計算コストが高く、アプリのパフォーマンスに影響を与えました。
最初のページ遷移が遅い
ページ遷移時に、リキッドグラスレンダリングの初期化に時間がかかります。特に初回表示時は、ガラス効果の計算処理が重く、体感的にラグを感じました。デバッグモードでは特に顕著でした。リリースビルドでは改善されたものの、完全な解消には至りませんでした。
ボトムシートの表示にラグ
modal_bottom_sheet を使ってボトムシートを表示した際、ボトムシート自体にはリキッドグラス効果を適用していないにもかかわらず、スライドアップのアニメーションがラグく感じる場面がありました。
明確な原因までは特定できていませんが、モーダル表示時には背景側の再描画やオーバーレイの合成なども同時に発生するため、画面全体としての描画負荷が影響している可能性があります。
いずれにしても、リキッドグラス表現を使っている画面上でボトムシートを表示する場合、
「シート自体に適用していなくても、表示時の体感パフォーマンスが落ちるケースがある」
という点は、実装してみて初めて気づいたポイントでした。
はまりどころ2: Layerの扱い
liquid_glass_rendererのLiquidGlassLayerの扱いには特に注意が必要でした。
トップレベルで囲むとスクロールできなくなる
最初は、画面全体をLiquidGlassLayerで囲んでしまい、スクロールが効かなくなる問題に遭遇しました。リキッドグラス効果は、レイヤー内のウィジェットの描画に影響を与えるため、スクロール可能なウィジェット（ListViewやCustomScrollViewなど）を直接囲むと、スクロールイベントが正しく処理されなくなります。
// ❌ 悪い例：画面全体を囲むとスクロールできなくなる
LiquidGlassLayer(
child: ListView(...), // スクロールできない
)
// ✅ 良い例：必要なパーツだけに適用
ListView(
children: [
LiquidGlassLayer(child: Card(...)), // カードだけに適用
LiquidGlassLayer(child: Card(...)),
],
)
解決策として、カードやボタンなどの個別のパーツにのみLiquidGlassLayerを適用するようにしました。画面全体を囲むのではなく、必要な箇所に絞って適用することで、スクロールの問題を回避できます。
パフォーマンス最適化の工夫
パフォーマンス改善のために、いくつかの工夫をしました。
RepaintBoundaryで描画を分離
背景とコンテンツをRepaintBoundaryで分離することで、不要な再描画を防ぎました。背景は固定なので、一度描画したら再描画する必要がありません。
Stack(
children: [
RepaintBoundary(child: LiquidBackground()), // 再描画コストを分離する
RepaintBoundary(child: getCurrentPage()), // ページのみ再描画
LiquidNavigation(...),
],
)
CustomScrollViewでネストスクロールを避ける
ListViewをColumnで囲むと、ネストスクロールの問題が発生します。CustomScrollViewとSliverを使うことで、単一のスクロール領域に統一し、パフォーマンスを改善しました。
余談：AIを使ったFlutter開発の体験
今回の開発では、CursorなどのAIツールを積極的に活用しました。とくに助けられたのが、Flutterでは避けて通れないネイティブ設定周りです。
アプリアイコン、アプリ名、通知やカレンダー権限の追加など、iOSではInfo.plist、AndroidではAndroidManifest.xmlと、毎回調べ直す必要があります。
AIに「通知権限を追加したい」「アプリアイコンを設定したい」と伝えるだけで、編集すべきファイルと具体的な変更内容を提示してくれるため、調査コストが大幅に削減されました。UI実装に集中できる時間が増えたのは、想像以上に大きなメリットでした。
まとめ
リキッドグラスデザインは、正しく使えば非常に美しく、モダンなUIを実現できます。一方で、パフォーマンスへの影響は無視できません。
- すべての要素に適用しない
- LiquidGlassLayerは必要なパーツだけに使う
- 再描画範囲を意識する
こうした点を意識することで、見た目と操作感のバランスを取ることができます。
現時点では実装者側の工夫が欠かせませんが、将来的にFlutter公式で同様の表現がより軽量にサポートされることを期待しています。
Discussion