分割ボタン Split Button

左側を押すといつもの操作、右側の▼を押すと別のやり方を選ぶメニューが出る、2つに割れたボタン。

別名: スプリットボタン▼付きボタンドロップダウン付きボタンメニュー付きボタンSplit Dropdown Button
動き: 左で実行右の▼でメニュー
作り方: 自作標準ウィジェットの組み合わせで自分で作ります

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

別タブで大きく開く ↗

どんなもの？

メールの「送信 ▼（予約送信）」のように、普段使う操作は1回で押せて、たまに使う変化形も近くに置けます。

Flutter に専用のウィジェットはないので、2つの FilledButton を並べ、内側の角だけ小さくして1つのボタンに見せます。

右側のボタンを MenuAnchor の builder で作り、押したら controller.open() でメニューを開きます。

こんなときに

よく使う操作が1つあり、たまに使う別のやり方が2〜3個ある

避けたい場面

どの操作も同じくらい使う（普通のメニューやボタンを並べる）

最小コード

Row(mainAxisSize: MainAxisSize.min, children: [
  FilledButton(
    style: FilledButton.styleFrom(shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.horizontal(left: Radius.circular(20), right: Radius.circular(4)),
    )),
    onPressed: send,
    child: const Text('送信'),
  ),
  const SizedBox(width: 2),
  MenuAnchor(
    menuChildren: [
      MenuItemButton(onPressed: scheduleSend, child: const Text('予約して送信')),
    ],
    builder: (context, controller, _) => FilledButton(
      style: FilledButton.styleFrom(shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.horizontal(left: Radius.circular(4), right: Radius.circular(20)),
      )),
      onPressed: controller.open,
      child: const Icon(Icons.arrow_drop_down),
    ),
  ),
])