円形に広がる遷移 Circular Reveal
押した場所を中心に円が広がっていき、その円の中に次の画面が現れる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます
別タブで大きく開く ↗どんなもの？
Android で一時期よく使われた「Circular Reveal」の動きです。どこを押したから開いたのかが、はっきり伝わります。
Flutter に専用のウィジェットはないので、PageRouteBuilder の transitionsBuilder で
ClipPath を使い、円の半径をアニメーションに合わせて大きくして作ります。
半径は押した場所から一番遠い角までの距離にすると、最後に画面全体が覆われます。
CustomClipper の reclip にアニメーションを渡すと、動きに合わせて切り抜きが更新されます。
こんなときに
- ボタンを押して、その色の画面が広がる演出（テーマ切り替え・カメラ起動など）
避けたい場面
- 何度も行き来する画面（毎回大きく動くので疲れる）
最小コード
class CircleClipper extends CustomClipper<Path> {
CircleClipper(this.center, this.progress) : super(reclip: progress);
final Offset center;
final Animation<double> progress;
@override
Path getClip(Size size) {
final radius = size.longestSide * 1.2 * progress.value;
return Path()..addOval(Rect.fromCircle(center: center, radius: radius));
}
@override
bool shouldReclip(CircleClipper old) => old.center != center;
}
PageRouteBuilder(
pageBuilder: (context, a, b) => const NextPage(),
transitionsBuilder: (context, animation, b, child) =>
ClipPath(clipper: CircleClipper(tapPosition, animation), child: child),
)使うウィジェット
PageRouteBuilderClipPathCustomClipper