[Flutter] CheckboxListTile ラベル付きCheckbox

Checkbox でユーザーのチェック状態を受け取れますが、CheckboxLiteTileは
チェックボックスとその横に文字列を表示できるもので、ユーザーに質問し、Yes・Noの回答を受け取るWidgetになります

CheckboxListTile

Checkbox これにtitle、テキストを追加したWidgetです

　

　
基本的なコードです

bool isChecked = false;
...
CheckboxListTile(
  title: const Text('CheckboxListTile'),
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
);

bool isChecked = false;

...

CheckboxListTile(

title: const Text('CheckboxListTile'),

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

);

左端にTitle、右端にチェックボックスになりました

Checkbox と Title の配置の設定は以下の３種類あり、

controlAffinity: ListTileControlAffinity.leading
- チェックボックスが左端に固定
controlAffinity: ListTileControlAffinity.trailing
- チェックボックスは右端に固定
controlAffinity: ListTileControlAffinity.platform
- プラットフォーム、Android iOS のデフォルトUI規則に沿う

ListTileControlAffinity.leading　のケースではこのようになります

bool isChecked = false;
...
CheckboxListTile(
  title: const Text('CheckboxListTile'),
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
  controlAffinity: ListTileControlAffinity.leading
);

bool isChecked = false;

...

CheckboxListTile(

title: const Text('CheckboxListTile'),

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

controlAffinity: ListTileControlAffinity.leading

);

CheckboxLiteTile の角丸の枠線を表示させるにはshapeを使います

Container(
  padding: EdgeInsets.all(10),
  child: CheckboxListTile(
    shape:  RoundedRectangleBorder(
      side: const BorderSide(),
      borderRadius: BorderRadius.circular(5),
    ),
    title: const Text('CheckboxListTile'),
    value: isChecked,
    onChanged: (bool? value) {
      setState(() {
        isChecked = value!;
      });
    },
    controlAffinity: ListTileControlAffinity.leading ,
  ),
);

Container(

padding: EdgeInsets.all(10),

child: CheckboxListTile(

shape: RoundedRectangleBorder(

side: const BorderSide(),

borderRadius: BorderRadius.circular(5),

title: const Text('CheckboxListTile'),

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

controlAffinity: ListTileControlAffinity.leading ,

);

Containerに入れてpaddingで余白を設定し、角丸の枠をはめました

目次
1. サンプルコード
2. 実行結果

サンプルコード

以上をまとめてみると

main.dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MainApp());
}
 
class MainApp extends StatelessWidget {
  const MainApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Checkbox')),
        body: const Center(
          child: TestCheckboxListTile(),
        ),
      ),
    );
  }
}
 
class TestCheckboxListTile extends StatefulWidget {
  const TestCheckboxListTile({super.key});
 
  @override
  State<TestCheckboxListTile> createState() => _TestCheckboxListTileState();
}
 
class _TestCheckboxListTileState extends State<TestCheckboxListTile>{
  bool isChecked = false;
 
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      // margin: const EdgeInsets.all(10),
      child: CheckboxListTile(
        shape:  RoundedRectangleBorder(
          side: const BorderSide(),
          borderRadius: BorderRadius.circular(5),
        ),
        title: const Text('CheckboxListTile'),
        value: isChecked,
        onChanged: (bool? value) {
          setState(() {
            isChecked = value!;
          });
        },
        controlAffinity: ListTileControlAffinity.leading ,
      ),
    );    
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text('Checkbox')),

body: const Center(

child: TestCheckboxListTile(),

);

}

class TestCheckboxListTile extends StatefulWidget {

const TestCheckboxListTile({super.key});

@override

State<TestCheckboxListTile> createState() => _TestCheckboxListTileState();

}

class _TestCheckboxListTileState extends State<TestCheckboxListTile>{

bool isChecked = false;

@override

Widget build(BuildContext context) {

return Container(

padding: EdgeInsets.all(10),

// margin: const EdgeInsets.all(10),

child: CheckboxListTile(

shape: RoundedRectangleBorder(

side: const BorderSide(),

borderRadius: BorderRadius.circular(5),

title: const Text('CheckboxListTile'),

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

controlAffinity: ListTileControlAffinity.leading ,

);

}

実行結果

Android エミュレータで実行した結果です

References:
CheckboxListTile class
CircleCheckboxListTile class