最近のデザインでよく見かける「ガラス風」「ぼかし透明感」のUI。
Flutter でも liquid_glass_renderer を使えば、簡単に実装できます。
通常の BackdropFilter でもぼかし表現は可能ですが、このパッケージは より自然なガラス感 を再現できるのが特徴です。
インストール
pubspec.yaml に追加します。
dependencies:
liquid_glass_renderer: ^0.0.2 # 最新バージョンを確認してください
基本的な使い方
import 'package:flutter/material.dart';
import 'package:liquid_glass_renderer/liquid_glass_renderer.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
// 背景画像
Image.network(
"https://picsum.photos/600/1200",
fit: BoxFit.cover,
),
// ガラス風エフェクト
Center(
child: Container(
width: 300,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const LiquidGlassRenderer(
opacity: 0.2, // ガラスの透明度
blur: 15.0, // ぼかし具合
borderRadius: 20.0, // 角丸
child: Center(
child: Text(
"Glass UI ✨",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
),
],
),
),
);
}
}
主なパラメータ
opacity→ ガラスの透明度（0.0〜1.0）blur→ 背景のぼかし強度borderRadius→ 角丸の大きさchild→ 中に配置するウィジェット
まとめ
liquid_glass_renderer を使うと、
ガラス風のUI（Glassmorphism） を簡単に実装できます。
- カードやダイアログを透明感のあるデザインにしたいとき
- 背景画像やグラデーションと組み合わせてモダンなUIを作りたいとき
に特に便利です。
