はじめに

Flutter の IconButton はデフォルトでは余白があり、他の要素とぴったり隣接させるのが難しいです。
この記事では、IconButton の余白を最小限にする方法を紹介します。

解決方法

以下のコードで IconButton の余白を最小限にできます。

IconButton(
  style: const ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
  padding: EdgeInsets.zero,
  constraints: const BoxConstraints(),
  icon: const Icon(Icons.add),
  onPressed: () {},
),

コードの説明

1. tapTargetSizeをMaterialTapTargetSize.shrinkWrapに設定してタップ領域を最小化
2. padding: EdgeInsets.zeroでpaddingをゼロに設定
3. constraints: 空のBoxConstraints()を設定し、ボタンのサイズ制約を解除

動作確認

このコードの動作を確認するには、以下の DartPad リンクを使用してください。

DartPad で確認する

🚨 ③ のパターンでは、DartPad とエミュレーターで結果が変わりました。
原因は掴めていないです。

エミュレーターでの結果

まとめ

IconButton の余白を最小限にして、隣接する要素とするなりなんなりできるようになりました。
ただしタップ領域が小さくなるため、ユーザビリティと相談しながら使いましょう。

参考資料

• IconButton の padding を取り除く方法（Flutter 逆引き辞典）
• ボタンの余白をなくす方法（monlog tech）
• Flutter の constraints について理解する（週刊 Flutter 大学）