目次
やり方
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
)
FlutterのIconButton
ウィジェットのデフォルトのpadding
を除くには、IconButton
のpadding
プロパティをEdgeInsets.zero
に設定し、constraints
プロパティにBoxConstraints()
を設定します。
padding
だけの設定では見た目に変化がないので注意が必要です。
constraints: BoxConstraints()が必要な理由
constraints: BoxConstraints()
が必要になる背景は、IconButton
の内部構造に関連しています。
IconButton
のデフォルト挙動
- デフォルトのpadding :
IconButton
はデフォルトでEdgeInsets.all(8.0)
の余白を持っています。このため、padding
をEdgeInsets.zero
に設定することで、余白自体は取り除かれます。 - デフォルトのconstraints :
IconButton
には、デフォルトで以下のような制約が設定されています:
constraints: BoxConstraints(
minWidth: 48.0,
minHeight: 48.0,
)
これにより、IconButton
は最小でも48×48のサイズを持ちます。
つまり、padding
をゼロにしても、制約によってボタンのサイズが48×48に保たれるため、見た目には余白が残ったように見えるのです
そのため、constraints: BoxConstraints()
を設定すると、デフォルトの最小幅・最小高さの制約を解除できます。
これにより、IconButton
はアイコンのサイズとpadding
に応じたサイズに変化します。
結論:paddingとconstraintsの役割
padding
: アイコンとボタンの端の間の余白を調整します。EdgeInsets.zero
にすることで余白を完全になくせます。constraints
: ボタン全体のサイズ制約を決定します。デフォルトの48×48を解除するためBoxConstraints()
が必要です。
Comment