【Flutter】CheckboxListTileで簡単に左寄せのチェックボックスを表示する方法

2024年1月27日2025年2月24日

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

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

この記事でわかること

CheckboxListTileで基本的な左寄せのチェックボックスを表示する方法
カスタムデザインを用いて左寄せのチェックボックスを実現する方法

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

目次閉じる

はじめに
まとめ

はじめに

FlutterのCheckboxListTileは使い勝手が良いですが、デフォルトではチェックボックスが右寄せになっています。この記事では、初心者にもわかりやすく、CheckboxListTileで簡単に左寄せのチェックボックスを表示する方法を解説します。ソースコードを交えて、2つの手法を詳しくご紹介します。

方法1: controlAffinity引数を利用した基本の左寄せ設定

controlAffinity引数を使用して、CheckboxListTileのチェックボックスを左寄せに設定します。

Dart

CheckboxListTile(
  controlAffinity: ListTileControlAffinity.leading, // チェックボックスを左寄せに設定
  title: Text('リストタイル'),
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = !_isChecked;
    });
  },
),

シンプルな設定で、左寄せのチェックボックスを即座に実現できます。

方法2: ListTileとカスタムデザインで左寄せを実現する

ListTileとカスタムデザインと余白の設定を組み合わせて、左寄せのチェックボックスを実現します。

Dart

ListTile(
  contentPadding: EdgeInsets.zero, // 余白をゼロに設定
  title: Container(
    padding: EdgeInsets.symmetric(horizontal: 16.0), // カスタムデザインの余白を追加
    decoration: BoxDecoration(
      border: Border(left: BorderSide(width: 4.0, color: Colors.blue)), // 左側に線を追加
    ),
    child: Row(
      children: [
        Checkbox(
          value: _isChecked,
          onChanged: (value) {
            setState(() {
              _isChecked = value!;
            });
          },
        ),
        Text('リストタイル'),
      ],
    ),
  ),
),

デザインの自由度が高まり、左寄せのチェックボックスをより細かく調整できます。