コンテナトランスフォーム Container Transform

押したカードがその場でふくらみ、角を広げながら画面いっぱいの詳細画面に変わる。閉じるとカードに縮んで戻る。

別名: カードが広がる遷移OpenContainerふくらむ遷移Container Transform Transition
動き: カードがふくらむそのまま画面になる閉じると縮む
作り方: パッケージあり標準でも作れますが、pub.dev のパッケージを使うと早いです

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

※ 動画は動きが分かるよう 1/2 の速さです。「触ってみる」は実際の速さで動きます

別タブで大きく開く ↗

どんなもの？

Material Design のモーションの1つで、カードやボタン（入れ物）が次の画面そのものに変身します。

Hero が「中身の一部」を飛ばすのに対して、こちらは「入れ物ごと」詳細画面に変わります。

Flutter チームの animations パッケージの OpenContainer を使い、

closedBuilder（閉じた見た目）と openBuilder（開いた画面）を渡すだけで作れます。

closedBuilder に渡される open を呼ぶと開き、openBuilder に渡される close を呼ぶと閉じます。

こんなときに

カード・リストの行・FAB から、その中身の詳細画面を開く

避けたい場面

開く元と先に見た目のつながりがない（どこから来たか伝わらず、ただ派手なだけになる）

最小コード

OpenContainer(
  transitionDuration: const Duration(milliseconds: 500),
  closedShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  closedBuilder: (context, open) => ListTile(
    title: Text(place.name),
    onTap: open,
  ),
  openBuilder: (context, close) => PlaceDetailPage(place),
)