Flutter で、チェックボックスを表示する Checkbox ウィジェットについて紹介します！
基本の使い方
Checkbox ウィジェットは、20〜27行目のように使用します。
value プロパティと onChanged プロパティの設定が必要です。
- value プロパティ
チェックされているかどうかの状態を表します。true がチェックされている状態、false がチェックされていない状態を表します。 - onChanged プロパティ
チェックボックスの状態が変更された時に実行する処理を指定します。
以下のソースコードでは、新しい状態をウィジェットに反映させるため、setState で再描画しています。
import 'package:flutter/material.dart';
class CheckboxSamplePage extends StatefulWidget {
const CheckboxSamplePage({Key? key}) : super(key: key);
@override
State<CheckboxSamplePage> createState() => _CheckboxSamplePage();
}
class _CheckboxSamplePage extends State<CheckboxSamplePage> {
bool _isChecked = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Checkbox Sample Page"),
),
body: Center(
child: Checkbox(
value: _isChecked,
onChanged: (bool? value) {
setState(() {
_isChecked = value!;
});
},
),
),
);
}
}
チェックボックスを無効状態にする
チェックボックスの状態を無効にするには、tristate プロパティを true に設定し、value プロパティを null に設定します。
tristate は、value プロパティに null を設定できるかどうかを決めるプロパティです。
Checkbox(
tristate: true,
value: null,
onChanged: …,
),
デザイン変更
チェックされた状態の色
チェックされた状態の色を変更するには、activeColor プロパティを使用します。
このプロパティでは、チェックされた状態のみの色しか変更できません。チェックされていない状態も色を変更したい場合は、次で紹介する fillColor プロパティを使用します。
Checkbox(
value: …,
onChanged: …,
activeColor: Colors.green,
),
チェックされた状態・チェックされていない状態の両方の色
チェックの状態に関わらず、色を変更したい場合は、fillColor プロパティを使用します。
以下の例では、チェックされた状態、されていない状態をまとめてオレンジ色になるように設定していますが、状態ごとに異なる色を設定することもできます。
Checkbox(
value: …,
onChanged: …,
fillColor: MaterialStateProperty.resolveWith((states) => Colors.orange),
),
チェックマークの色
チェックマークの色を変更するには、checkColor プロパティを使用します。
Checkbox(
value: …,
onChanged: …,
checkColor: Colors.black,
),
ボーダーの設定
ボーダーの設定を変更するには、side プロパティを使用します。
以下の例では、ボーダーの太さを 5.0、色を青に設定しています。
Checkbox(
value: …,
onChanged: …,
side: const BorderSide(width: 5.0, color: Colors.blue),
),
形の変更
チェックボックスの形を変更するには、shape プロパティを使用します。
以下の例では、チェックボックスの形を円にしています。
Checkbox(
value: …,
onChanged: …,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
まとめ
Flutter でチェックボックスを表示する Checkbox ウィジェットについて紹介しました！
- Checkbox ウィジェットは、value と onChanged プロパティの指定が必要
- tristate プロパティを ture にして、value プロパティを null にすることで、無効状態にすることが可能
- Checkbox は、以下のデザインを変更可能
- チェックされた状態の色
- チェックされていない状態の色
- チェックマークの色
- ボーダー
- 形
以上で、【Flutter】Checkbox の使い方とデザイン変更方法 は終わりです。
コメント