長押しで編集モード Jiggle Mode
アイコンを長押しすると全部がぷるぷる揺れ始め、−を押して消したり並べ替えたりできる。完了で止まる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
iPhone のホーム画面でおなじみの、「今は編集中」をひと目で伝える演出です。
onLongPress で編集モードに入り、AnimationController を repeat(reverse: true) で往復させ、
各アイコンを Transform.rotate で少しだけ傾けます。
アイコンごとに揺れの向きをずらすと、ばらばらに揺れて見えて自然です。
編集中だけ角に「−」ボタンを出し、「完了」で揺れを止めます。
こんなときに
- ホーム画面風の並び・お気に入りの整理など、普段は触らない編集をさせたい
避けたい場面
- 普段から並べ替えや削除をする画面(毎回モードに入るのは手間)
最小コード
GestureDetector(
onLongPress: () {
setState(() => editing = true);
wiggle.repeat(reverse: true);
},
child: AnimatedBuilder(
animation: wiggle,
builder: (context, child) => Transform.rotate(
angle: editing ? (wiggle.value - 0.5) * 0.09 * (i.isEven ? 1 : -1) : 0,
child: child,
),
child: AppIcon(app),
),
)使うウィジェット
GestureDetector(onLongPress)AnimationController.repeatTransform.rotate