Flutter: IconButtonのPaddingをなくす

プログラミング
スポンサーリンク




スポンサーリンク

やりたいこと

IconButtonのPaddingをなくしたい

 

IconButtonには、デフォルトで48pxの余白が設定されています。

Row(
  children: [
    IconButton(
      icon: Icon(Icons.bookmark_outline),
    ),
  ],
),

 

1つ並べるだけだと問題ないのですが、例えば2つのIconButtonを横に並べて詰めて表示したい場合、このままだと勝手に余白が設定されてしまうため、詰めて表示することができません。

Row(
  children: [
    IconButton(
      icon: Icon(Icons.bookmark_outline),
    ),
    IconButton(
      icon: Icon(Icons.star_outline),
    ),
  ],
),

 

やり方

IconButtonではなくGestureDetectorを使う

IconButtonではなくGestureDetectorを使うと、Iconに余計なPaddingが設定されなくなるので、詰めて表示することができます。

Row(
  children: [
    GestureDetector(
      onTap: () {},
      child: Icon(
        Icons.bookmark_outline,
        color: Colors.grey,
      )
    ),
    GestureDetector(
      onTap: () {},
      child: Icon(
        Icons.star_outline,
        color: Colors.grey,
      ),
    ),
  ],
),

 

コメント

タイトルとURLをコピーしました