Flutter激震のLiquid Glassデザインで遊んでみる

クロスマート テックアドベントカレンダーの12/13の記事です🎄

https://qiita.com/advent-calendar/2025/xmart

前回はFlutterの環境構築について記述しました！
もうみなさんの手元にはFlutterが動く環境があると思うので、今回は早速、最新トレンドの Liquid Glass（リキッドグラス）デザイン で遊んでみたいと思います。

最近、モバイルアプリ開発界隈で 「Liquid Glass（リキッドグラス）」 という言葉を聞かない日はありませんよね。

iOS 26での採用を皮切りに一気にトレンドとなった、 「流動性（Fluidity）」と「光の屈折（Refraction）」 を組み合わせたこの有機的なデザイン言語。

今回は、このLiquid GlassをFlutterで実装できるパッケージ liquid_glass_renderer を使って、遊んでみたいと思います。

実装：Liquid Glass の基本検証

1. 全てを包み込むレイヤー構造

このパッケージの肝となるのは LiquidGlassLayer という親ウィジェットです。この中で描画されるガラス形状だけが、お互いに影響を与えたり（ブレンド）、背景を屈折させたりする仕組みになっています。

まずは最小構成で試してみましょう。

Stack(
  children: [
    // 背景レイヤー
    Positioned.fill(
      child: Image.network(
        'https://picsum.photos/seed/xmart1/800/800',
        fit: BoxFit.cover,
      ),
    ),

    // ガラス効果を出したいコンテンツ
    Center(
      child: LiquidGlassLayer(
        child: LiquidGlass(
          shape: LiquidRoundedSuperellipse(borderRadius: 30),
          child: const SizedBox(
            height: 200,
            width: 200,
            child: Center(child: FlutterLogo(size: 100)),
          ),
        ),
      ),
    ),
  ],
),

ここで登場する LiquidGlass は、ガラス表現を作るための最小単位です。以下の2つのプロパティが必須となります。

• shape: ガラスそのものの形状を決定します
• child: ガラスの領域内に配置するコンテンツ（中身）のウィジェットです。

2. 質感をコントロールする LiquidGlassSettings

LiquidGlassLayer に settings プロパティを渡すことで、ガラスの質感を細かく調整できます。
デフォルトのままでも綺麗ですが、アプリの雰囲気に合わせて屈折率や色味を変えるとより効果的です。

Stack(
  children: [
    // 背景レイヤー
    Positioned.fill(
      child: Image.network(
        'https://picsum.photos/seed/xmart1/800/800',
        fit: BoxFit.cover,
      ),
    ),

    // ガラス効果を出したいコンテンツ
    Center(
      child: LiquidGlassLayer(
        // ここで質感を定義する
        settings: const LiquidGlassSettings(
          thickness: 20,
          blur: 10,
          glassColor: Color(0x33FFFFFF),
        ),
        child: LiquidGlass(
          shape: LiquidRoundedSuperellipse(borderRadius: 30),
          child: const SizedBox(
            height: 200,
            width: 200,
            child: Center(child: FlutterLogo(size: 100)),
          ),
        ),
      ),
    ),
  ],
).

主な設定項目は以下の通りです。これらを調整するだけで、薄いガラスから分厚いクリスタルまで表現できます。

• thickness: ガラスの厚みを設定します。値が大きいほど、背景の屈折（歪み）が強くなります。
• blur: すりガラスのような「ぼかし」の強度です。数値を上げるとマットな質感になります。
• glassColor: ガラス自体の色味です。透明度（Alpha）を含めた色を指定することで、うっすらと色付いたガラスを表現できます。

その他にもいくつか設定項目がありますので、それぞれ実際に試して好みのガラス質感を追求してみてください。

3. インタラクションを追加してもっと遊ぶ

liquid_glass_renderer には、静的なガラス表現だけでなく、触って楽しめるアニメーション機能も用意されています。

LiquidStretch

LiquidGlass をラップすることで、タッチ時に「むにゅっ」と押しつぶされたり、ゴムのように伸縮したりする有機的なアニメーションを追加できます。

GlassGlow

ユーザーのタッチ位置に合わせてガラスの表面を発光させたり、指の動きに合わせて形状を追従・伸縮させるようなリッチなエフェクトを追加できます。

これらを組み合わせることで、ただ綺麗なだけでなく、ついつい触りたくなるUIが作れます。ぜひ試してみてくださいね！

Stack(
  children: [
    // 背景レイヤー
    Positioned.fill(
      child: Image.network(
        'https://picsum.photos/seed/xmart1/800/800',
        fit: BoxFit.cover,
      ),
    ),

    // ガラス効果を出したいコンテンツ
    Center(
      child: LiquidGlassLayer(
        settings: const LiquidGlassSettings(thickness: 20, blur: 10),
        child: LiquidStretch(
          stretch: 0.5,
          interactionScale: 1.05,
          child: LiquidGlass(
            shape: LiquidRoundedSuperellipse(borderRadius: 30),
            child: GlassGlow(
              glowColor: Colors.white24,
              glowRadius: 1.0,
              child: const SizedBox(
                height: 200,
                width: 200,
                child: Center(child: FlutterLogo(size: 100)),
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

まとめ：Flutterは進化し続けている

Liquid Glassという、レンダリング負荷の高いデザイン言語が登場した当初、「Flutterはこれに対応できるのか？」「マテリアルデザインに縛られたFlutterには厳しいのでは？」と界隈が騒然としたのを覚えています。

しかし、現在のFlutterはその懸念を払拭する進化を遂げています。
Flutterチームは現在、Material Designやリキッドグラスのようなデザインシステム層と、それを描画するコアフレームワーク層を明確に切り離す方針を進めています。これは、Flutterが特定のデザインに依存せず、 「どんなデザインシステムでも柔軟に取り込めるプラットフォーム」 へと生まれ変わりつつあることを意味します。

現時点では公式のLiquid Glass対応はまだですが、将来的な対応予定も示唆されています。今はコミュニティ製で遊びつつ、公式からの盤石なサポートが来る日を楽しみに待ちたいですね。
皆さんもぜひ、liquid_glass_renderer で遊んでみてください！