☑️

【Flutter】CheckBox/CheckBoxListTileのパディングを消す方法

2023/04/22に公開

Flutter

tech

はじめに

CheckBoxとCheckBoxListTileにはデフォルトでパディングが設定されています。

これらのパディングを消す方法について調査したのでまとめてみます。

※視認し易くにするため全体を水色の枠で囲っています。

CheckBox	CheckBoxListTile

解説

CheckBoxの場合

SizedBoxを使用し、widthとheightを指定することで消すことができます。

child: SizedBox(
  width: 24,
  height: 24,
  child: Checkbox(
    value: isChecked,
    onChanged: (bool? value) {
      setState(() {
        isChecked = value!;
      });
    },
  ),
)

24でほとんど消え、20だとほぼpadding無しの状態になりました 🙌

デフォルト	w, h = 24	w, h = 20

CheckBoxListTileの場合

contentPaddingを利用（一部のパディングを削除可能）

CheckBoxListTileにはcontentPaddingというプロパティが存在するのでこちらに0を指定してみます。

child: CheckboxListTile(
  contentPadding: EdgeInsets.zero,
  title: const Text('Title'),
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
),

左側のパディングは消えましたが、右側と上下のパディングは残ってしまいました 🤔
おそらく、このプロパティは上下には効果がなく、右側のパディングはCheckBoxのデフォルトのパディングが残っている感じかと思われます。

デフォルト	contentPadding指定

色々試してみたのですが、CheckBoxListTileにはこれ以上パディングを消す方法が無さそうでした、、、（もし知っている方いましたら情報お待ちしております 🙇🏻 ）

自前で実装する

CheckBoxListTileでは限界だったため、自前で実装してみることにします。

TextとCheckBoxをRowで並べ、全体をInkWellで囲みonTapに処理を書きます。

class CustomCheckBoxListTile extends StatefulWidget {
  const CustomCheckBoxListTile({Key? key}) : super(key: key);

  @override
  State<CustomCheckBoxListTile> createState() => _CustomCheckBoxListTileState();
}

class _CustomCheckBoxListTileState extends State<CustomCheckBoxListTile> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          isChecked = !isChecked;
        });
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text('Title'),
          AbsorbPointer(
            child: SizedBox(
              width: 20,
              height: 20,
              child: Checkbox(
                value: isChecked,
                onChanged: (_) {},
              ),
            ),
          ),
        ],
      ),
    );
  }
}

ポイント

InkWellのonTapに処理を書くので、CheckboxのonChangedのように新しいbool値を受け取ることができません。そのため、保持しているbool値の反対を代入することで対応します。
InkWellのonTapとCheckboxのonChangedに同様の処理を書くのは冗長なので、onChanged側は (_) {}にしています。(nullだとチェックボックスが非活性になってしまう)
Checkboxをタップした際にもInkWellのonTapが反応するようにCheckboxはAbsorbPointerで囲んでおきます。

デフォルト	自前で実装

上下左右のパディングを無くした CheckBoxListTile風のWidgetを構築できました 🎊

以上です。