【Flutter】IconButtonのパディングをゼロにする方法

2024年9月8日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

IconButtonのパディングをゼロにする方法
最小サイズの制約を解除して、自由なサイズ設定をする方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

FlutterのIconButtonウィジェットは、デフォルトでパディングやサイズが設定されています。しかし、カスタムUIデザインやレイアウトを実現するために、アイコンボタンのパディングをゼロにしたい場合があります。この記事では、IconButtonのパディングをゼロにし、最小サイズの制約を取り除く方法を紹介します。

方法1: パディングと制約をゼロに設定する

アイコンボタンのパディングをゼロにするためには、paddingプロパティにEdgeInsets.zeroを指定します。しかし、これだけではデフォルトの最小サイズ（48×48ピクセル）が適用されてしまいます。そこで、constraintsプロパティに空のBoxConstraints()を指定して、サイズの制約を解除します。

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('アイコンボタンのパディングをゼロにする'),
        ),
        body: Center(
          child: IconButton(
            padding: EdgeInsets.zero,         // パディングをゼロに設定
            constraints: BoxConstraints(),    // サイズの制約を解除
            onPressed: () {
              print('アイコンボタンが押されました');
            },
            icon: Icon(Icons.star),           // 表示するアイコン
          ),
        ),
      ),
    );
  }
}

paddingにEdgeInsets.zeroを設定してパディングをゼロにする。