【Flutter】CheckboxListTileの背景色をカスタマイズする方法

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

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

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

この記事でわかること

CheckboxListTileの背景色の基本的なカスタマイズ方法
高度なカスタマイズとデザインの手法

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

目次閉じる

はじめに
まとめ

はじめに

FlutterのCheckboxListTileは素晴らしいウィジェットですが、デフォルトの背景色に満足していない方もいるのではないでしょうか？この記事では、CheckboxListTileの背景色をカスタマイズする方法を初心者にもわかりやすく解説します。ソースコードも交えて、効果的な3つのカスタマイズ方法をご紹介します。

方法1: tileColorを使った基本のカスタマイズ

tileColorを使用して、CheckboxListTileの基本的な背景色を指定します。

Dart

CheckboxListTile(
  tileColor: Colors.blue[100], // タイルの背景色を青色に設定
  title: Text('リストタイル'),
  value: false,
  onChanged: (value) {},
),

シンプルな設定で、簡単に背景色を変更できます。

方法2: 高度なカスタマイズ – BoxDecorationを活用

BoxDecorationを利用して、より高度な背景色のカスタマイズを行います。

Dart

CheckboxListTile(
  tileColor: null, // タイルの背景色をクリア
  activeColor: Colors.green, // チェック時のアクティブカラーを緑に設定
  title: Container(
    decoration: BoxDecoration(
      color: Colors.yellow[100], // カスタム背景色を指定
      borderRadius: BorderRadius.circular(10), // 角丸を追加
    ),
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('リストタイル'),
    ),
  ),
  value: false,
  onChanged: (value) {},
),

カスタムデザインや角丸の追加など、より細かな調整が可能です。

方法3: カスタムアニメーションを加える

AnimatedContainerを使用して、背景色にアニメーションを追加します。

Dart

CheckboxListTile(
  tileColor: Colors.transparent, // タイルの背景色を透明に設定
  title: AnimatedContainer(
    duration: Duration(milliseconds: 300), // アニメーションの時間を設定
    color: isChecked ? Colors.teal : Colors.grey[200], // チェック時と非チェック時の背景色を切り替え
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('リストタイル'),
    ),
  ),
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },
),

チェック状態の変化が滑らかになり、ユーザーエクスペリエンスが向上します。