今回は、UIにふんわりとした”やさしさ”を加えてくれるFlutterパッケージ「soft_edge_blur」を紹介します。
「soft_edge_blur」って何？
名前の通り、要素のエッジ（縁）に**ソフトなぼかし（blur）**を加えられるパッケージです。たとえば、画像の端をぼかして背景に自然になじませたいときや、カードの縁をふわっと目立たせたいときに大活躍します。
Flutterでぼかし表現といえば BackdropFilter や ImageFilter.blur が有名ですが、それらは全体のぼかしがメイン。一方このパッケージは「エッジだけをぼかす」ことに特化しています。
インストール方法
まずは pubspec.yaml に追加しましょう。
dependencies:
soft_edge_blur: ^0.0.2 # バージョンは最新をチェック！
基本の使い方
とってもシンプルです。ぼかしたいウィジェットを SoftEdgeBlur でラップするだけ！
import 'package:soft_edge_blur/soft_edge_blur.dart';
SoftEdgeBlur(
blurRadius: 20, // ぼかしの強さ
edgeThickness: 40, // ぼかす範囲の幅
child: Image.asset('assets/sample.jpg'),
),
パラメータ説明
blurRadius: どれだけ強くぼかすか（大きいほどふわっと）edgeThickness: エッジからどの範囲までぼかすか
実例：カードにソフトな縁を追加
SoftEdgeBlur(
blurRadius: 15,
edgeThickness: 30,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: Center(child: Text("ふんわりカード")),
),
),
背景がある画面で使うと、縁がふわっと溶け込むように見えて、ちょっと高級感のあるUIになります！
注意点とコツ
- 背景が透明 or 背景色に近い色だとぼかしが目立ちにくいので、コントラストがある背景に使うと効果的。
SoftEdgeBlurは内部的にShaderMaskなどを使っており、パフォーマンスには注意。大量に使うと処理が重くなるかも。- アニメーションとの組み合わせもOK。
blurRadiusやedgeThicknessをAnimatedBuilderなどで変化させると、ふわっと変化するUIが作れます。
まとめ
「soft_edge_blur」は、Flutterでふんわりとした、優しいUIを作りたいときにとても便利なパッケージです。特にブライダルアプリや美容系アプリ、癒し系UIとの相性は抜群です。
シンプルだけど使いどころ次第で印象的なデザインに仕上がるので、ぜひ一度試してみてください。
