すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】Checkboxウィジェットの使い方、デザイン例


Checkboxウィジェットとは

api.flutter.dev

マテリアルデザインチェックボックスを生成するウィジェット

使い方

基本系

Checkbox(
    value: ... , // bool値、trueでチェックが入る
    onChanged: ..., // チェックボックスをタップした際のイベントハンドラ
    ),

サンプルアプリ

コードは以下。

class CheckBoxTest extends StatefulWidget {
  const CheckBoxTest({Key? key}) : super(key: key);

  @override
  State<CheckBoxTest> createState() => _CheckBoxTestState();
}

class _CheckBoxTestState extends State<CheckBoxTest> {
  bool isChecked = false; // valueプロパティに渡す変数

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  isChecked = value!; // チェックボックスに渡す値を更新する
                });
              }),
          SizedBox(
            height: 10,
          ),
          Text(isChecked ? "value: true" : "value: false")
        ],
      ),
    );
  }
}

onChangedプロパティに渡されるハンドラは、引数にbool値が渡される。 この値をvlueプロパティに指定している変数に渡す。

チェックボックスのタップを無効にする

チェックボックスへのタップを無効にするには、valueにnullを渡す。 この時tristateにtrueを渡すことで、valueにnullを渡すことができる (デフォルトは tristate: false)。 nullが渡されるとチェックボックスにハイフンが表示されタップが無効になる。


デザイン

背景色の指定

背景色の指定にはfillColorプロパティを指定する。

背景色を緑に指定

Checkbox(
    fillColor:
        MaterialStateProperty.resolveWith((states) => Colors.green),
    value: ... ,
    onChanged: ..., 
    ),

チェックマークの色指定

チェックマークの色を指定するにはcheckColorプロパティを指定する。

チェックマークを緑に指定

Checkbox(
    checkColor: Colors.green,
    fillColor:
        MaterialStateProperty.resolveWith((states) => Colors.white),
    value: ... ,
    onChanged: ..., 
    ),

上記は見やすいように背景色を白に指定している。

チェックのみを表示する

以下のように背景色を透明にすれば良い。

チェックのみを表示

Checkbox(
    checkColor: Colors.black,
    fillColor: MaterialStateProperty.resolveWith(
        (states) => Colors.transparent),
    value: ... ,
    onChanged: ..., 
    ),

枠を丸にする

shapeプロパティを指定すれば良い。

枠を丸く指定

Checkbox(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10))),
    value: ... ,
    onChanged: ..., 
    ),

Radius.circular()に渡す値が0で正方形、大きくするほど枠の角が丸くなる。

枠の太さを変更する

sideプロパティを指定する。

枠のwidthを5に指定

Checkbox(
    side: BorderSide(width: 5),
    value: ... ,
    onChanged: ..., 
    ),

サイズを変更する

Checkboxウィジェットにはサイズを直接指定するプロパティがない

そのためワークアラウンドとしてTransform.scaleでラップする方法がある。

Transform.scale(
  scale: 4, // 4倍に拡大
  child: Checkbox(
    value: ... ,
    onChanged: ..., 
    ),
),

scaleプロパティに拡大した倍率を指定する。