🍏
CupertinoCheckbox class

2025/02/20に公開
 Note(ノート)公式の解説を翻訳して記載しております✏️
macOSスタイルのチェックボックス。
チェックボックス自体は状態を保持しません。その代わりに、チェックボックスの状態が変更されると、ウィジェットは onChanged コールバックを呼び出します。チェックボックスを使うほとんどのウィジェットは、onChanged コールバックをリッスンして、チェックボックスの見た目を更新するために、新しい値でチェックボックスをリビルドします。
チェックボックスは、tristateがtrueの場合、true、false、nullの3つの値を表示することができる。値がnullの場合はダッシュが表示されます。デフォルトではtristateはfalseで、チェックボックスの値はtrueかfalseでなければなりません。
Apple Human Interface Guidelines (HIG)では、チェックボックスはmacOSでの使用が推奨されているが、iOSでの使用については言及されていない。iOSで複数選択コンポーネントが必要な場合、HIGは開発者に代わりにスイッチ（FlutterのCupertinoSwitch）を使うか、クリエイティブなカスタムソリューションを見つけることを推奨しています。

 使い方bool型の状態変数を定義する。
bool? isChecked = true;
onChangedのcallBackの中で、setStateを使用してリビルドすると、checkboxを切り替えることができる。
 CupertinoCheckbox(
      checkColor: CupertinoColors.white,
      // Set tristate to true to make the checkbox display a null value
      // in addition to the default true and false values.
      tristate: true,
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = value;
        });
      },
    );

 examplehttps://youtube.com/shorts/OVjJDofvIpY
main.dart
import 'package:flutter/cupertino.dart';

/// Flutter code sample for [CupertinoCheckbox].

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

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('CupertinoCheckbox Example'),
      ),
      child: SafeArea(child: CupertinoCheckboxExample()),
    );
  }
}

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

  @override
  State<CupertinoCheckboxExample> createState() =>
      _CupertinoCheckboxExampleState();
}

class _CupertinoCheckboxExampleState extends State<CupertinoCheckboxExample> {
  bool? isChecked = true;

  @override
  Widget build(BuildContext context) {
    return CupertinoCheckbox(
      checkColor: CupertinoColors.white,
      // Set tristate to true to make the checkbox display a null value
      // in addition to the default true and false values.
      tristate: true,
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = value;
        });
      },
    );
  }
}

 Que（きっかけ）Flutter公式の動画を見て、「古き良きcheckboxはご存知かもしれません。こだわりのあるiOSユーザー向けのアプリを構築する場合は、Appleのデザインガイドラインに適合するチェックボックスであるCupertinoCheckboxが必要になります」を見て気になり試してみました。
https://www.youtube.com/watch?v=ua54JU7k1Us
確かにMaterialDesignとは違うかな。。。


 Summary（要約）valueとonChangedは説明は不要と思われますが、Creates a CupertinoApp/CupertinoThemeData/tristateは聞き慣れなかってので内容記載します。
CupertinoApp
CupertinoAppを作成する。
CupertinoThemeData
CupertinoAppを作成する。
home]、[routes]、[onGenerateRoute]、[builder]のうち少なくとも1つはnullであってはならない。routes]のみが指定された場合、Navigator.defaultRouteNameのエントリを含める必要がある。
このクラスは[WidgetsApp]のインスタンスを作成します。
指定されたパラメータのデフォルトは、iOSの合理的なデフォルトスタイルです。
CupertinoCheckboxのtristate: trueプロパティ役割は
trueの場合、チェックボックスの[value]はtrue、false、nullのいずれかになります。
[CupertinoCheckbox]は値がnullの場合、ダッシュを表示する。
トライステート・チェックボックス（[tristate]がtrue）がタップされると、その[onChanged]コールバックは、現在の値がfalseの場合はtrueに、valueがtrueの場合はnullに、valueがnullの場合はfalseに適用されます（つまり、タップされるとfalse⇒true⇒null⇒falseと循環します）。
tristateがfalse（デフォルト）の場合、[value]はnullであってはならず、[onChanged]はtrueとfalseを切り替えるだけである。
Note(ノート)

使い方

example

Que（きっかけ）

Summary（要約）

Discussion
