切り欠き付きボトムバー Bottom App Bar with Notch
下のバーの真ん中がくぼんでいて、そこに丸い「＋」ボタンがはまり込んでいる形。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
投稿や記録が主役のアプリで、「一番大事な操作」を真ん中に目立たせる形です。
BottomAppBar の shape に CircularNotchedRectangle を渡し、
FAB の位置を FloatingActionButtonLocation.centerDocked にすると、FAB の形に合わせてバーがくぼみます。
Material 3 の FAB は角丸の四角なので、くぼみと合わせるには shape: const CircleBorder() で丸にします。
左右のアイコンの間には、ボタン分の空き（SizedBox）を入れます。
こんなときに
- 「投稿する」「記録する」など、主役の操作が1つはっきりしている
避けたい場面
- 主役の操作がない（ただのボトムナビゲーションで十分）
最小コード
Scaffold(
floatingActionButton: FloatingActionButton(
shape: const CircleBorder(), // くぼみに合わせて丸に
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 8,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(icon: const Icon(Icons.home_outlined), onPressed: () {}),
IconButton(icon: const Icon(Icons.search), onPressed: () {}),
const SizedBox(width: 48), // ボタンの分の空き
IconButton(icon: const Icon(Icons.notifications_outlined), onPressed: () {}),
IconButton(icon: const Icon(Icons.person_outline), onPressed: () {}),
],
),
),
)使うウィジェット
BottomAppBarCircularNotchedRectangleFloatingActionButtonLocation.centerDocked