💧

【Flutter】Liquid Glassを最速？で実装してみた!

tolto

2025/06/15に公開

みなさんはWWDC 25見ましたか？リアルタイム視聴するために私は午前2時まで頑張って起きていました。そのWWDCの発表の中で一番目の注目だったのはやはりLiquid Glassだったと思います。
私も早速以前使用していたmacBook Air M1にインストールして遊んでいます。
ここ数日はLiquid Glassについてさまざまな議論が世界中でされています。
Flutter公式リポジトリでも対応の有無で議論になっていました。
そんな中昨日Xを見ていると気になる投稿がありました。
海外の人がFlutterでLiquid GlassをFlutterで再現してそれをパッケージとして公開したという投稿を発見！それは早速試すしかない！ということでやってみたのでまとめます！

バージョン,パッケージ

Flutterバージョン
3.32.4
パッケージ

バージョン：^0.1.1-dev.5

開発者のXアカウント
https://x.com/imadetheseworks

実装

今回最初にインストールしたときはdev.2が最新でしたが風呂に入って飯食ってたらいつのまにかdev.5が公開されていてdev.5のバージョンでめっちゃそれっぽい感じになっていました。
dev.2

dev.5

なので今回はdev.5を元に実装した方法を書いていきます。
詳しい実装方法はreadmeを参考にしてください。
これが今回実装したLiquid Glass使用した部分のコード全体です。
いろいろ試した結果おすすめの設定を適用しています。

 Center(
            child: SizedBox(
              width: 200,
              height: 200,
              child: LiquidGlass(
                blur: 2,
                settings: LiquidGlassSettings(
                    thickness: 42,
                    lightIntensity: 1,
                    ambientStrength: 1,
                    chromaticAberration: 1,
                    blend:10,
                    lightAngle:0.6 * pi,
                ),
                shape: LiquidRoundedRectangle(
                  borderRadius: Radius.circular(50),
                ),
                child: Center(
                  child: SizedBox(width: 80, height: 80, child: FlutterLogo()),
                ),
              ),
            ),
          ),

細かく見ていきます。
まずLiquidGlassウィジェットですがこれが本体です子ウィジェットの背景をLiquid Glassにします。shapeとchildが必須プロパティです。
shapeは角の角度を書き込みます。LiquidRoundedRectangleだけでなく円形にするなども用意されています。

//　角50を落とす
shape: LiquidRoundedRectangle(
    borderRadius: Radius.circular(50),
),

// 円形
shape:LiquidOval(),

blurプロパティは数字をあげると背景がぼやけていきます。
1~3くらいがおすすめですが強めのボケ感があるのもiOS 26やmacOS 26にもありましたので強めにするのもありだと思います。いろいろ調整してみてください。
最後にsettingsプロパティを紹介します。
settingsプロパティにはLiquidGlassSettings()ウィジェットを使用します。
以下はLiquidGlassSettings()ウィジェットの説明です。
thicknessは周囲の光の具合を調整します。1などの極端に低い数値だと境目がわからないので30~50くらいがおすすめです。先ほどのサンプルだと42になっています。lightIntensityはガラスに当たる光の強さ。大きいほど輝きが増します。ambientStrengthは周囲の光の強さを調整します。高いと太くなってあまりかっこよくないです。chromaticAberrationは端の虹みたいなのを再現します。この値を大きくするとエッジ（縁）にカラフルなにじみ（フリンジ）が発生します。
blendはガラス内の液体感を再現していますがREADMEにあるような移動を実装しない限りあまり関係なかったです。lightAngleはハイライト（輝き）の方向を決めます。デフォルトで0.5 * piになっていて上から光があたります。先ほどのサンプルコードも0.6*piに設定しています

まとめ

今回紹介した liquid_glass_renderer パッケージを使えば、iOS/macOS 26で話題のLiquid GlassエフェクトをFlutterでも再現することができました。

開発途中のパッケージながら、バージョンが上がるごとにクオリティも劇的に向上していて、Flutterでここまで表現できるのかと驚かされました。

設定パラメータも豊富で、ガラスの厚みや光の当たり方、にじみ具合などを細かくチューニングできる
LiquidGlass ウィジェットを囲うだけで適用できるので、UIのデザイン性を高めたいときにかなり有効
パフォーマンス面も（現時点では）許容範囲で、アニメーションを加えればさらに魅力が増す余地あり

これは今後に期待したいパッケージですね!

FlutterでLiquid Glassを味わいたい方は、ぜひ一度触ってみてください！また、今後のアップデートにも注目しておくと面白そうです。

パッケージのリポジトリ

今回作ったアプリのリポジトリ

ぽちぽちのつどいPublication

大阪大学非公認アプリ開発サークル「ぽちぽちのつどい」です！ Flutterをメインとしたアプリ開発や、交流イベントなど色々な活動を行っています✨

バージョン,パッケージ

実装

まとめ

Discussion