【Flutter】Checkbox の使い方とデザイン変更方法

Flutter

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!;
            });
          },
        ),
      ),
    );
  }
}
checkboxの表示例

チェックボックスを無効状態にする

チェックボックスの状態を無効にするには、tristate プロパティを true に設定し、value プロパティを null に設定します。
tristate は、value プロパティに null を設定できるかどうかを決めるプロパティです。

Checkbox(
  tristate: true,
  value: null,
  onChanged: …,
),
無効化したcheckbox

デザイン変更

チェックされた状態の色

チェックされた状態の色を変更するには、activeColor プロパティを使用します。
このプロパティでは、チェックされた状態のみの色しか変更できません。チェックされていない状態も色を変更したい場合は、次で紹介する fillColor プロパティを使用します。

Checkbox(
  value: …,
  onChanged: …,
  activeColor: Colors.green,
),
チェックされた時の色を変更したcheckbox

チェックされた状態・チェックされていない状態の両方の色

チェックの状態に関わらず、色を変更したい場合は、fillColor プロパティを使用します。
以下の例では、チェックされた状態、されていない状態をまとめてオレンジ色になるように設定していますが、状態ごとに異なる色を設定することもできます。

Checkbox(
  value: …,
  onChanged: …,
  fillColor: MaterialStateProperty.resolveWith((states) => Colors.orange),
),
色変更したcheckbox(チェックされている時)
色変更したcheckbox(チェックされていない時)

チェックマークの色

チェックマークの色を変更するには、checkColor プロパティを使用します。

Checkbox(
  value: …,
  onChanged: …,
  checkColor: Colors.black,
),
チェックマークの色を変更したcheckbox

ボーダーの設定

ボーダーの設定を変更するには、side プロパティを使用します。
以下の例では、ボーダーの太さを 5.0、色を青に設定しています。

Checkbox(
  value: …,
  onChanged: …,
  side: const BorderSide(width: 5.0, color: Colors.blue),
),
ボーダーの設定を変更したcheckbox

形の変更

チェックボックスの形を変更するには、shape プロパティを使用します。
以下の例では、チェックボックスの形を円にしています。

Checkbox(
  value: …,
  onChanged: …,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
),
形を変更したcheckbox

まとめ

Flutter でチェックボックスを表示する Checkbox ウィジェットについて紹介しました!

  • Checkbox ウィジェットは、value と onChanged プロパティの指定が必要
  • tristate プロパティを ture にして、value プロパティを null にすることで、無効状態にすることが可能
  • Checkbox は、以下のデザインを変更可能
    • チェックされた状態の色
    • チェックされていない状態の色
    • チェックマークの色
    • ボーダー

以上で、【Flutter】Checkbox の使い方とデザイン変更方法 は終わりです。

参考

おすすめ書籍

コメント

タイトルとURLをコピーしました