Checkboxウィジェットとは
マテリアルデザインのチェックボックスを生成するウィジェット。
使い方
基本系
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プロパティを指定する。
Checkbox( side: BorderSide(width: 5), value: ... , onChanged: ..., ),
サイズを変更する
Checkboxウィジェットにはサイズを直接指定するプロパティがない。
そのためワークアラウンドとしてTransform.scale
でラップする方法がある。
Transform.scale( scale: 4, // 4倍に拡大 child: Checkbox( value: ... , onChanged: ..., ), ),
scaleプロパティに拡大した倍率を指定する。