個人開発者が勉強がてらまとめているだけのサイトです

長押しで編集モード Jiggle Mode

アイコンを長押しすると全部がぷるぷる揺れ始め、−を押して消したり並べ替えたりできる。完了で止まる。

別名
アイコンが揺れるぷるぷるモードホーム画面の編集ウィグル編集モードJiggle ModeWiggle 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

似ているもの・一緒に見たいもの

触ってみる ↗
ジェスチャー 並べ替えグリッドReorderable Grid

アイコンを長押ししてつかみ、ほかのアイコンの上へ運ぶと、その場で並びが入れ替わる。

長押しでつかむ