[Flutter] Checkbox チェックボックスのWidget

ユーザーからの確認を取るためにチェックを入れるCheckbox Widgetはよく使います
AndroidでもiOSでも同様の機能があります

Checkbox

チェックを入れてユーザーの確認を取得するWidgetです
　

シンプルに□の升にチェックを入れるための
最低限の設定はこのようになります

bool isChecked = false;
...
Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
);

bool isChecked = false;

...

Checkbox(

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

);

value
- チェックされたどうかの状態
onChanged
- ボックスをチェックされた時の挙動を受ける

チェックされた状態

value は　tristate: null, true, false の３つの状態を持てるとあります
tristateを有効にすると nullの状態、無効を作ることができます

bool? isCheckedTristate = null;
...
Checkbox(
  value: isCheckedTristate,
  tristate: true,
  onChanged: (bool? newValue) {
    setState(() {
      isCheckedTristate = newValue;
    });
  },
);

bool? isCheckedTristate = null;

...

Checkbox(

value: isCheckedTristate,

tristate: true,

onChanged: (bool? newValue) {

setState(() {

isCheckedTristate = newValue;

});

);

null -> false -> true -> null … の順番でTristateが表示させることも可能です

null はーの表示になります

false

true

Checkboxには大きさを設定するプロパティがないので
Transform.scale を使うことでできます

Transform.scale(
  scale: 4.0,
  child: Checkbox(
    value: isChecked,
    onChanged: (bool? value) {
      setState(() {
        isChecked = value!;
      });
    },
  ),
);

Transform.scale(

scale: 4.0,

child: Checkbox(

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

);

４倍にしてみました

その他の設定として
枠を丸型：shape
枠の太さ：side
チェックの色：checkColor
背景色：fillColor

Checkbox(
  // 枠を角丸にする、10ではこのケースで円形になる
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  // 枠の太さ、0で無し
  side: const BorderSide(width: 0),
  // チェックの色
  checkColor: Colors.white,
  // 背景色
  fillColor: WidgetStateProperty.resolveWith((states) => Colors.red),
  ...
),

Checkbox(

// 枠を角丸にする、10ではこのケースで円形になる

shape: const RoundedRectangleBorder(

borderRadius: BorderRadius.all(Radius.circular(10)),

// 枠の太さ、0で無し

side: const BorderSide(width: 0),

// チェックの色

checkColor: Colors.white,

// 背景色

fillColor: WidgetStateProperty.resolveWith((states) => Colors.red),

...

円形、枠なし、背景色が赤、チェックマークが白になりました

尚、MaterialStateProperty は（v3.19.0-0.3.pre）以降に非推奨になり
代わりにWidgetStatePropertyを使います

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

サンプルコード

チェック状態をTextに表示させて、まとめたコードです

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: TestCheckbox(),
        ),
      ),
    );
  }
}

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

  @override
  State<TestCheckbox> createState() => _TestCheckboxState();
}

class _TestCheckboxState extends State<TestCheckbox>{
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          isChecked? 'Checked' : 'not Checked',
          style: const TextStyle(
            fontSize: 20,
          ),
        ),
        const SizedBox(height: 30),
        Transform.scale(
          scale: 2.0,
          child: Checkbox(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
            side: const BorderSide(width: 0),
            checkColor: Colors.white,
            fillColor: WidgetStateProperty.resolveWith((states) => Colors.red),
            value: isChecked,
            onChanged: (bool? value) {
              setState(() {
                isChecked = value!;
              });

            },
          ),
        ),
      ],
    );    
  }
}

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: TestCheckbox(),

);

}

class TestCheckbox extends StatefulWidget {

const TestCheckbox({super.key});

@override

State<TestCheckbox> createState() => _TestCheckboxState();

}

class _TestCheckboxState extends State<TestCheckbox>{

bool isChecked = false;

@override

Widget build(BuildContext context) {

return Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

isChecked? 'Checked' : 'not Checked',

style: const TextStyle(

fontSize: 20,

const SizedBox(height: 30),

Transform.scale(

scale: 2.0,

child: Checkbox(

shape: const RoundedRectangleBorder(

borderRadius: BorderRadius.all(Radius.circular(10)),

side: const BorderSide(width: 0),

checkColor: Colors.white,

fillColor: WidgetStateProperty.resolveWith((states) => Colors.red),

value: isChecked,

onChanged: (bool? value) {

setState(() {

isChecked = value!;

});

);

}

実行結果

実行結果です

References;
Checkbox class
CheckboxListTile class
tristate property
Transform class
Transform.scale constructor