MENU

【Flutter】IconButtonのデフォルトのpaddingを削除するには?

記事内に商品プロモーションが含まれる場合があります
目次

やり方

IconButton(
    padding: EdgeInsets.zero,
    constraints: BoxConstraints(),
)

FlutterのIconButtonウィジェットのデフォルトのpaddingを除くには、IconButtonpaddingプロパティをEdgeInsets.zeroに設定し、constraintsプロパティにBoxConstraints()を設定します。

paddingだけの設定では見た目に変化がないので注意が必要です。

constraints: BoxConstraints()が必要な理由

constraints: BoxConstraints()が必要になる背景は、IconButtonの内部構造に関連しています。

IconButtonのデフォルト挙動

  1. デフォルトのpaddingIconButtonはデフォルトでEdgeInsets.all(8.0)の余白を持っています。このため、paddingEdgeInsets.zeroに設定することで、余白自体は取り除かれます。
  2. デフォルトのconstraintsIconButtonには、デフォルトで以下のような制約が設定されています:
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()が必要です。
Share

Comment

コメントする

目次