Udemyセール開催中! 対象コースが1,220円から

【Flutter】Checkbox ListTileの使い方|チェックボックスをListTileとして表示

今回は「CheckboxListTile」の基本的な使い方について紹介します。

CheckboxListTileを使えばCheckboxとListTileを複合したチェックボックスを作成できます。

目次

CheckboxListTileの使い方

isChecked = true
isChecked = false
class _MyAppState extends State<MyApp> {
  bool isChecked = false; //bool型の変数を作っておく

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: CheckboxListTile(
            title: Text('Hello World'),
            value: isChecked,
            onChanged: (value) {
              setState(() {
                isChecked = value!;
              });
            },
          ),
        ),
      ),
    );
  }
}

CheckboxListTileを使用するにはbool型の変数を定義しておき、valueプロパティに定義した変数を渡します。そして上記コードのようにonChangedプロパティのsetStateで変数のbool値を変更します。

CheckboxListTileの装飾・ボーダー色を変更

isChecked = true
isChecked = false
//省略...
body: Center(
  child: Theme(
    data: Theme.of(context)
        .copyWith(unselectedWidgetColor: Colors.orangeAccent),
    child: CheckboxListTile(
      title: Text('Hello World'),
      secondary: Icon(Icons.face),
      controlAffinity: ListTileControlAffinity.leading,
      tileColor: Colors.yellow[100],
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value!;
        });
      },
      activeColor: Colors.red,
      checkColor: Colors.white,
    ),
  ),
),

チェックボックスのボーダー色を変更するには、上記コードのようにThemeでCheckboxListTileをラップしてdataプロパティで色を指定します。「Colors.orangeAccent」のところを好きな色に変更すればOKです。

またチェックボックスがアクティブ状態のボックス色、チェックマークの色はCheckBoxのプロパティで指定できます。

activeColorvalueが「true」の時のチェックボックスの色
checkColorチェックマークの色

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Theme(
            data: Theme.of(context)
                .copyWith(unselectedWidgetColor: Colors.orangeAccent),
            child: CheckboxListTile(
              title: Text('Hello World'),
              secondary: Icon(Icons.face),
              controlAffinity: ListTileControlAffinity.leading,
              tileColor: Colors.yellow[100],
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  isChecked = value!;
                });
              },
              activeColor: Colors.red,
              checkColor: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

  • URLをコピーしました!
目次
閉じる