最終更新日

Flutter界を揺るがしたLiquid Glass議論と、その実装方法まとめ

Flutter iOS 開発・技術 デザイン

目次

Apple最新ニュース

こんにちは👋 Flutterアプリネイティブぽくなること好きな
アプリチームのルーカス (YOUTRUST / X)

2週間ほど前、Apple🍎がWWDC 2025でさまざまな機能とアップデートを発表しました。その中でiOS 26が紹介され、新たなデザインプラットフォームLiquid Glass🫧には多くの人が驚かされたことでしょう。 2020〜2022年に流行したGlassmorphism*1が、突如としてAppleのメインデザインへと進化しました。

Flutterエンジニアとしてどうすればいい？

個人的には、Appleが常に新しい挑戦を続けている点にワクワクしています。✨しかしFlutterアプリエンジニアとしては、この流れを受けて自分のアプリをどのようにアップデートすべきか、興味が尽きません。🤔
多くの大手企業が独自デザインを実装しているため、純粋にネイティブ風のUIを追求するケースは少ないようですが、パーミッションダイアログがシステム標準のまま表示されると、Flutter製アプリとの違和感が生まれてしまいます。

パーミションダイアログ

Flutterでは、iOS風のダイアログをCupertinoWidgets🧩というコンポーネント群で提供しています。CupertinoWidgetsは実際のシステムUIではなく、優秀なエンジニアがシステムUIに極めて近い見た目を再現したコンポーネントです。しかし、完全な再現には数ヶ月単位の開発期間📆と高い実装難易度📐が必要なため、これだけに頼るのは困難だと感じています。

そこで、他のFlutterエンジニアがどのように対応しているかを調べたところ、FlutterリポジトリにはまだLiquid Glassに関する議論が見当たらなかったため、自分でIssueを立てました。📝

github.com

その中で、解決案を共有しました💡。

  • iOS 26のLiquidGlass風🫧Widgetを導入しつつ、現行のCupertinoWidgetも残す
  • iOSのバージョンに応じてウィジェットのデザインを自動切り替え。🔄iOS 26ではLiquid Glassを使用し、iOS 26以前は従来デザインを適用する
  • useMaterial3のように、iOSのテーマ設定🎨で管理できるようにする

Flutter界隈に激震が走った！

最初はFlutterチームから一件の返信をもらえるだけかと思っていましたが、予想を超える大きな反響がありました。😲

コメント欄では、まるで戦場のような熱い議論が繰り広げられました（笑）。🔥💬

すごく長いスレッドになってしまったので、要点をまとめます。

コメント全体の印象

  • 難易度とメンテナンス負荷 ⚙️ Liquid Glass を Flutter のコアに取り込むのは技術的に高難度であり、プラットフォーム間の保守コストも大きい。
  • 既存ウィジェットの限界 📏 現行の CupertinoWidgets は iOS 26 以前のデザインを前提としており、そのままでは最新の UI に追随できない。
  • 独立パッケージ化の提案 📦 多くの開発者が「コアフレームワークに組み込むより、まずは独立パッケージとして試験的に提供すべき」と提案している。

主な論点と意見

1. 専用パッケージ化 vs コア機能化⚖️

  • 独立パッケージ 📦 fluent_ui や macos_ui のように、まずはサードパーティ製として flutter_liquid_glass を公開し、コミュニティの検証を得る。
  • コア機能化 🧩 フレームワーク本体への組み込みは API 設計や後方互換性が課題。まずはパッケージで実績を積むべき、という意見が多数。

2. 技術的難易度と導入タイミング⏱️

  • 背景サンプリング（Blur） は ImageFilter で比較的簡単に実現可能。
  • 複雑なアニメーション🎞️（水滴の合体やドラッグ時の加速表現など）は、レンダリングレイヤの構造を見直さないと困難。
  • 「まずはブラーだけ → 次にインタラクション対応」というステップ分け案も提案されている。

3. Flutter の強みへの回帰提案💡

  • 「あらゆるプラットフォームのデザインに追随し続けるのは果てしない戦い」⚔️
  • Flutter の本質的な強みは 一貫した UI レンダリング と 優れた開発体験 💻 である。
  • AR／組み込みデバイス／Web（WASM／WebGPU） のような領域こそ、Flutter の独自性を発揮すべき、という意見。

4. アクセシビリティおよび保守性🔍

  • Apple の Liquid Glass は視認性や高齢者への配慮に課題があるため、Flutter で完全再現しても実運用に不安が残る。
  • 定期的なデザイン変更に追随し続けることは、コストとリスクが大きい。⚠️

まとめ

  1. まずは別パッケージで実験提供し、コミュニティからのフィードバックを集める。
  2. 背景ブラーや半透明処理は ImageFilter で実装可能なので、サンプルとして公開しやすい。
  3. アニメーションや複雑描画は段階的に対応し、Flutter の強みを活かす領域にも注力する。
  4. 最終的には「追随」より「差別化」を掲げ、Flutter の価値を高める方針が望ましい。

Flutterチームのスタンス

僕のIssueがバズった同じ日にGoogleのPiinksさんから返信をいただけました

皆さん、こんにちは！この件をご提起いただきありがとうございます。WWDCで発表された新機能の数々は、本当にワクワクさせられますね。

本スレッドの冒頭にも追記しましたが、購読されている皆さんへお知らせです：

Material 3 Expressive と同様に、現時点では Cupertino ライブラリで Apple ’26 UI デザイン機能を開発しておらず、これらの更新に対する貢献も現在は受け付けておりません。

Material と Cupertino の両方で大規模なアップデートが到来したことは、Flutter におけるデザインシステム統合の長期的なアーキテクチャを見直すまたとない（そしてエキサイティングな！）機会です。

この検討のため、私たちは現在のアプローチについて幅広く調査を開始しています。たとえば、長らく要望のあった Material と Cupertino ライブラリをコアフレームワークから分離するアイデアも再検討しています。

デザイン更新を一時的に停止することで、Flutter のデザインライブラリの将来的な健全性と保守性を確保するための余裕を持ちたいと考えています。調査の進捗や今後の方針については、コミュニティの皆さんに透明性を保ちながら、数週間以内に詳細をお知らせしていく予定です💙

なお、WWDCではデザインアップデート以外にも数多くの新機能が発表されており、そちらも追跡中です。最新情報は Apple release 2025: Xcode 26, iOS 26, macOS 26プロジェクトをご覧ください。各アップデートが Flutter にどう実装されるか、引き続き注目していきます。

このように早急にご返信いただき、大変心強く感じました。😊 しかし、まだ課題が残っています。FlutterチームはLiquid Glass対応を予定していないとのことですが、僕はダイアログ部分だけでも対応したいため、独自に実装を行いました。🔥

FlutterでLiquid Glassの実装

Liquid Glassの特徴

実装の前にLiquid Glassの特徴を把握する必要があります。重要な注意点をまとめました。

  • 歪み（Distortion）: UI の背後のレイヤーが、まるでガラス瓶越しに見ているかのように歪んで表示されます。
  • 揺らぎ（Wobbly）: 一部の UI 要素はドラッグするとジェリーのように揺れ動き、テキストや線がぼやける反応を示します。
  • 分裂と再結合（Splitting & reuniting）: ボタンがパネルに変形したり、再びボタンに戻ったりします。まるで水滴が割れて再び合わさるような揺らぎアニメーションが特徴です。
  • 色のにじみ（Color spill-over）: 右側のアルバムアートの鮮やかな色が、左側のサイドバーにさりげなくにじみ出します。
  • 2 つのバリアント（Two variants）: すべての UI 要素は「通常版（regular）」と「クリア版（clear）」の 2 種類が用意されています。これが、私の元の投稿で言及した「‘frosting’ vs clear」の意味です。
  • アクセシビリティ（Accessibility）: システム全体の設定から、一部のエフェクトをオフにして視認性を高めることができます。

Level 1 シンプルなLiquid Glass実装

基本的に、高度なエフェクトを見ると、シェーダー🧙‍♂️に思いを馳せたくなります。シェーダーとは、画面上にオブジェクトを描画する際に、陰影や質感、色を計算するプログラムです。🖼️コンピュータグラフィックスにおける最強のツールだと思うので、これを使って実装してみたいと思いました。書くのは容易ではありませんが、AI🤖を活用すると効率的に生成できます。

同じスレッドで誰かがShadertoy（シェーダー共有サイト）のサンプルを紹介してくれたのも良いヒントでした。💡Flutterでもシェーダーを手軽に利用できるため、こちらのリポジトリでサンプル実装を試しています。🚀

github.com

結果がこの投稿で共有しました。

もちろん、まだAppleの実装には及びませんが、初回の実装としては十分に面白い結果が得られたと感じています。😉

Level 2 別のシンプルなLiquid Glass実装

次ちゅーやんさんが別のShadertoyサンプルベースで作成した例も参考になります。

Level 70：先進的なLiquid Glass実装 by ImadeTheseWorks さん

@ImadeTheseWorks さんによる liquid_glass_renderer パッケージは、シェーダーだけでなく Flutter フレームワーク層にも手を入れた高度な実装です🔧。リポジトリに記されたコード構造から、以下のような工夫が読み取れます🧠：

高レベルのカスタム Glass ウィジェット 🧩 - Glass, GlassRenderer, GlassOptions といった専用クラス群で API を整備し、背景ブラーから描画までをシームレスに組み込んでいます。

パイプラインの拡張🚦 - LiquidGlassRenderer の内部では、Shader のロード、パラメータ設定、そして要素の描画パス（前景・背景・マスク）を包括的に処理します。
- シェーダー用フラグメントコードを保有し、背景と前景のブレンド処理を一元管理しています。

オプション構成の充実⚙️ - GlassOptions では blurSigma, contrast, saturation, edgeFade, tintColor など細かな設定が可能です。
- デフォルト値やカスタム値を組み合わせることで、「やりすぎない Liquid Glass 表現」から「大胆な視覚効果」まで対応できます。

Flutterフレームワークとの密接な統合🔗 - GlassRenderer は StatefulWidget として、Flutter のライフサイクル（initState / didUpdateなど）に対応し、適切に shader の再ロードや cleanup を行います。
- RenderObject を自前で拡張するため、一般的なウィジェットとは一線を画す制御が可能です。

実用的な API 呼び出し📱 - LiquidGlass ウィジェットを通常の Container 代わりに置くだけで効果が得られるため、使い勝手もかなり良好です。
- ドキュメントREADMEには、パラメーターの意味や使い方の記述もあり、実践向けに整理されています。

Level 80 超先進なLiquid Glass実装

シェーダーとビジュアル詳しい知り合いのRenanさんが自分の実装も共有しました。🧠 自分のRenderboxを書いたり、シェーダーを書いたり、Flutterアプリを全体2回レンダリングすることを試してみました。🧪

専用のGlassRenderObjectWidget🧱 - MultiChildRenderObjectWidgetを継承し、マスク用とコンテンツ用の2つの子ウィジェットを持たせています。
- これにより、まず背景をマスクし、次にコンテンツをシェーダーで合成しています。🎨

細かいパラメーター制御⚙️
- GlassOptions で blurSigma、contrastBoost、saturationBoost、grainIntensity などを細かく調整可能。
- edgeScale や refractionBorder といった境界処理も任意設定でき、エッジからの屈折効果を緻密にコントロールします。🧬

2パスレンダリングの仕組み🔄 - 第1パス：マスク部分（背景）のみを SceneBuilder でレンダリングし、ui.Image としてキャッシュ。🖼️
- 第2パス：キャッシュ済みマスクをシェーダーのサンプラーに渡し、pushBackdropFilter でシェーダー処理を適用後にコンテンツを描画。
- この仕組みで「背景だけをぼかし」「前景を一定の層で合成」する本格的なLiquid Glass効果を実現しています。✨

パフォーマンス配慮🚀 - キャッシュした ui.Image は次フレーム再利用し、不要になったタイミングで都度 dispose() することでメモリリークを防止。
- alwaysNeedsCompositing や isRepaintBoundary を適切に設定し、不要な再描画を抑制しています。

パッケージとしてリリースされませんでしたけど、githubから直接に追加できます🔗。

github.com

〆

Flutterでも自分らしいLiquid Glass🫧体験を追求し、開発を楽しみましょう！🎉

私たちは、ただ見た目を真似るのではなく、ユーザーにとって心地よく、自然に感じられる体験🌿を常に意識しています。Appleのような最新の動きにも目を向けつつ、Flutterでもその魅力を届けられるよう日々アップデートを重ねています。🔄

もし、最新のUIトレンドを追いながら、ユーザー体験を第一に考える開発に共感できる方がいれば、ぜひ一緒に語り合いましょう！🗣️

YOUTRUSTではエンジニアを募集しております。👩‍💻👨‍💻情熱ある方はぜひご応募ください！✨

herp.careers

*1:透明度と背景のぼかしを組み合わせ、要素を半透明のすりガラスのように見せるデザイン手法