拡張FAB（文字付き FAB） Extended FAB

右下の丸いボタンに「メモを書く」のような文字が付いた横長版。スクロールで読み進めるとアイコンだけに縮む。

別名: 文字付きFAB縮むFABエクステンデッドFAB伸び縮みするボタンExtended Floating Action Button
動き: 下へ読むと縮む上へ戻すと文字が出る
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

アイコンだけでは何のボタンか伝わりにくいときに、文字を添えた FAB です。Gmail の「作成」ボタンがこれです。

FloatingActionButton.extended に icon と label を渡すと作れ、isExtended: false でアイコンだけになります。

読み進めるときは縮めて内容を隠さないようにし、上へ戻したら文字を出すのが定番の動きです。

スクロールの向きは UserScrollNotification で分かります。

縮むときの幅の変化をなめらかにしたい場合は、デモのように AnimatedSize で包んで自作します。

こんなときに

画面の主役の操作が1つあり、アイコンだけでは意味が伝わりにくい

避けたい場面

主役の操作がない画面（FAB 自体が不要）

最小コード

FloatingActionButton.extended(
  onPressed: compose,
  isExtended: extended, // false でアイコンだけに縮む
  icon: const Icon(Icons.edit_outlined),
  label: const Text('メモを書く'),
)

// 下へ読み進めたら縮める
NotificationListener<UserScrollNotification>(
  onNotification: (n) {
    setState(() => extended = n.direction != ScrollDirection.reverse);
    return false;
  },
  child: ListView(...),
)