【Flutter】CheckBoxの使い方｜チェックボックスを実装

2023年7月18日2023年7月21日

FlutterのCheckBoxウィジェットの用途と使い方のまとめ記事です。

本記事ではCheckBoxのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説していきます。

CheckBoxとは？

CheckBoxとはチェックボックスをタップする度にONとOFFを切り替えられるウィジェットです。

ONとOFFに切り替わるたびに指定しておいた処理を実行できます。

CheckBoxの基本的な使い方

CheckBoxの基本形は下のサンプルコードをご覧ください。

valueの引数にbool値として定義した変数を渡し、onChangedで変数の値を変化させます。

var _isChecked = false;

Checkbox(
  value: _isChecked,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

CheckBoxのサイズを変更する

CheckBoxにはチェックボックスのサイズを変更するプロパティがないので、代わりにTransform.scaleウィジェットを使用できます。

Transform.scale()のscaleの引数にdouble値を渡して表示サイズの倍率を調整します。下のサンプルコードではCheckBoxのサイズを４倍にしています。

Transform.scale(
  scale: 4,
  child: Checkbox(
    value: _isChecked,
    onChanged: (newValue) {
      setState(() {
        _isChecked = newValue!;
      });
    },
  ),
),

アウトプット（左側）

CheckBoxで知っておきたい基本プロパティ

スクロールできます

プロパティ名	説明
activeColor	ボックスがONの場合の背景色を指定
checkColor	チェックマークの色を指定
shape	チェックボックスの形状を指定
side	ボックスがOFFの場合の枠線の色・太さを指定

activeColor：ボックスがONの場合の背景色を指定

activeColorの引数にColorを渡して背景色を指定できます。

Checkbox(
  value: _isChecked,
  activeColor: Colors.amber,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

アウトプット（左側）

checkColor：チェックマークの色を指定

checkColorの引数にColorを渡してチェックマークの色を指定できます。

Checkbox(
  value: _isChecked,
  checkColor: Colors.amber,
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

アウトプット（左側）

shape：チェックボックスの形状を指定

shapeの引数にOutlinedBorder()を渡して形状を指定できます。

丸い形状にする場合はCircleBorder()を渡します。

Checkbox(
  value: _isChecked,
  shape: CircleBorder(),
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
),

アウトプット（左側）

side：ボックスがOFFの場合の枠線の色・太さを指定

sideの引数にBorderSide()を渡してOFFの場合の枠の色・太さを指定できます。

BorderSide()のcolorで枠の色、widthで太さを指定できます。

Checkbox(
  value: _isChecked,
  side: BorderSide(
    color: Colors.amber,
    width: 3,
  ),
  onChanged: (newValue) {
    setState(() {
      _isChecked = newValue!;
    });
  },
)

アウトプット（左側）

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: const CheckboxExample(),
      ),
    );
  }
}

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

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  var _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Transform.scale(
        scale: 4,
        child: Checkbox(
          activeColor: Colors.amber,
          checkColor: Colors.red,
          value: _isChecked,
          side: const BorderSide(
            color: Colors.amber,
            width: 3,
          ),
          onChanged: (newValue) {
            setState(() {
              _isChecked = newValue!;
            });
          },
        ),
      ),
    );
  }
}

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/Checkbox-class.html