ローディングボタン Loading Button
押すとボタンが丸く縮んで中でくるくる回り、終わるとチェックマークに変わる。二度押しも防げる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
通信を伴う送信ボタンで、「今処理している」「終わった」をボタンそのもので伝えます。
状態（待機・処理中・完了）を持ち、AnimatedContainer の幅を状態に応じて変えると、なめらかに縮んだり戻ったりします。
処理中は onPressed（onTap）を null にして押せなくし、二重送信を防ぎます。
中身は CircularProgressIndicator、終わったら Icons.check に差し替えます。
こんなときに
- 送信・保存・ログインなど、数秒かかる通信のボタン
避けたい場面
- 一瞬で終わる操作（くるくるが一瞬だけ出てちらつく）
最小コード
AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: state == Load.idle ? 240 : 56, // 押すと丸く縮む
height: 56,
decoration: BoxDecoration(color: Colors.indigo, borderRadius: BorderRadius.circular(28)),
child: InkWell(
onTap: state == Load.idle ? submit : null, // 処理中は押せない
child: Center(
child: switch (state) {
Load.idle => const Text('送信する'),
Load.loading => const CircularProgressIndicator(),
Load.done => const Icon(Icons.check),
},
),
),
)使うウィジェット
AnimatedContainerCircularProgressIndicator