【Flutter】CheckboxListTileの使い方｜ラベル付きチェックボックスを実装

2023年7月20日2023年7月21日

FlutterのCheckboxListTileウィジェットの用途と使い方のまとめ記事です。

本記事ではCheckboxListTileのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説していきます。

CheckboxListTileとは？

CheckboxListTileとはCheckBoxとListTileの機能を組み合わせたウィジェットです。

CheckboxListTileの基本的な使い方

CheckboxListTileの基本形は下のサンプルコードをご覧ください。

titleでチェックボックスの横に表示されるコンテンツを指定します。valueの引数にbool値として定義した変数を渡し、onChangedで変数の値を変化させます。

var _isChecked = false;

CheckboxListTile(
  title: Text('This is CheckboxListTile'),
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
),

CheckboxListTileに影をつけて立体にする

CheckboxListTileに影をつけて立体にするにはCardウィジェットを使用します。

Card(
  child: CheckboxListTile(
    title: Text('This is CheckboxListTile'),
    value: _isChecked,
    onChanged: (newValue) {
      setState(() {
        _isChecked = newValue!;
      });
    },
  ),
)

アウトプット（左側）

CheckBoxで知っておきたい基本プロパティ

スクロールできます

プロパティ名	説明
activeColor	チェックボックスがONの場合の背景色を指定
checkColor	チェックマークの色を指定
tileColor	タイルの背景色を指定
subtitle	サブコンテンツを表示
controlAffinity	チェックボックスを左側に表示

activeColor：ボックスがONの場合の背景色を指定

activeColorの引数にColorを渡してチェックボックス背景色を指定できます。

CheckboxListTile(
  title: Text('This is CheckboxListTile'),
  activeColor: Colors.amber,
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

アウトプット（左側）

checkColor：チェックマークの色を指定

checkColorの引数にColorを渡してチェックマークの色を指定できます。

CheckboxListTile(
  title: Text('This is CheckboxListTile'),
  checkColor: Colors.amber,
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

tileColor：タイルの背景色を指定

tileColorの引数にColorを渡してタイルの背景色を指定できます。

CheckboxListTile(
  title: Text('This is CheckboxListTile'),
  tileColor: Colors.amber,
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

アウトプット（左側）

subtitle：サブコンテンツを表示する

subtitleの引数に任意のウィジェットを渡してサブコンテンツを表示できます。

CheckboxListTile(
  title: Text('This is CheckboxListTile'),
  subtitle: Text('This is subtitle'),
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

アウトプット（左側）

controlAffinity：チェックボックスを左側に表示する

controlAffinityの引数にListTileControlAffinity.leadingを渡すことでチェックボックスを左側に表示できます。

CheckboxListTile(
  title: Text('This is CheckboxListTile'),
  controlAffinity: ListTileControlAffinity.leading,
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
),

アウトプット（左側）

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: const CheckboxListTileExample(),
      ),
    );
  }
}

class CheckboxListTileExample extends StatefulWidget {
  const CheckboxListTileExample({super.key});

  @override
  State<CheckboxListTileExample> createState() =>
      _CheckboxListTileExampleState();
}

class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
  var _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CheckboxListTile(
        title: Text('This is CheckboxListTile'),
        subtitle: Text('This is subtitle'),
        activeColor: Colors.amber,
        controlAffinity: ListTileControlAffinity.leading,
        value: _isChecked,
        onChanged: (newValue) {
          setState(() {
            _isChecked = newValue!;
          });
        },
      ),
    );
  }
}

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/CheckboxListTile-class.html