Make Checkbox adaptive without delegating to `CupertinoCheckbox` #147892

victorsanni · 2024-05-06T21:53:32Z

Currently, Checkbox.adaptive delegates to CupertinoCheckbox when the current platform is iOS or macOS. This PR serves to make Material Checkbox configure to a Cupertino look and feel when the Checkbox.adaptive constructor is used on iOS or macOS.

Currently, delegating to CupertinoCheckbox means that many parameters to material Checkbox are ignored:

flutter/packages/flutter/lib/src/material/checkbox.dart

Lines 109 to 115 in 54e6646

    
             /// 
        
             /// If a [CupertinoCheckbox] is created, the following parameters are ignored: 
        
             /// [mouseCursor], [fillColor], [hoverColor], [overlayColor], [splashRadius], 
        
             /// [materialTapTargetSize], [visualDensity], [isError]. However, [shape] and 
        
             /// [side] will still affect the [CupertinoCheckbox] and should be handled if 
        
             /// native fidelity is important. 
        
             ///

This PR allows for an adaptive checkbox that keeps all the parameters to the regular material Checkbox, allowing for the same levels of customization, thus fixing issues like #134917.

#134917 (comment) provides the value proposal behind this PR.

Before:

After:

code sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// Flutter code sample for [Checkbox].

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

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

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

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

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

class _CheckboxExampleState extends State<CheckboxExample> {
  bool? isChecked = true;

  @override
  Widget build(BuildContext context) {
    Color getColor(Set<WidgetState> states) {
      const Set<WidgetState> interactiveStates = <WidgetState>{
        WidgetState.pressed,
        WidgetState.hovered,
        WidgetState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.blue;
      }
      return Colors.red;
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        const Text('Cupertino Checkbox:'),
        CupertinoCheckbox(
          checkColor: Colors.white,
          tristate: true,
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value;
            });
          },
        ),
        const Text('Material Checkbox:'),
        Checkbox(
          checkColor: Colors.white,
          tristate: true,
          fillColor: WidgetStateProperty.resolveWith(getColor),
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value;
            });
          },
        ),
        const Text('Adaptive Checkbox'),
        Checkbox.adaptive(
          checkColor: Colors.white,
          tristate: true,
          fillColor: WidgetStateProperty.resolveWith(getColor),
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value;
            });
          },
        ),
      ],
    );
  }
}

Related PR: #130425

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

Piinks

I think it was mentioned offline that one of the benefits here was that the CupertinoCheckbox did not implement an animation that could now be reflected here by re-implementing it in material.

Can you share some images or screen recordings to the PR description that show the difference between the original material Checkbox, the original CupertinoCheckbox, and the new adaptive cupertino checkbox this PR creates to illustrate the differences?

packages/flutter/lib/src/material/checkbox.dart

QuncCccccc · 2024-05-07T17:25:39Z

packages/flutter/lib/src/material/checkbox.dart

      ..color = checkColor
      ..style = PaintingStyle.stroke
-      ..strokeWidth = _kStrokeWidth;
+      ..strokeWidth = _isCupertino


Feel like _isCupertino is not necessary if we already have the enum. Can we do something like this?

..StrokeWidth = switch (designSpec) { _DesignSpec.cupertino => _kCupertinoStrokeWidth, _DesignSpec.material => _kStrokeWidth, }

Here and all the if (_isCupertino) statements below:)

QuncCccccc · 2024-05-07T18:30:37Z

Somehow this PR doesn't trigger "Google testing", maybe mark this to be Ready to review? I think this PR change probably will break G3 and we might also need to add the Adaptation change, just like what Switch did(link).

Piinks · 2024-05-08T21:02:33Z

packages/flutter/lib/src/material/checkbox.dart

-      ? _CheckboxDefaultsM3(context)
-      : _CheckboxDefaultsM2(context);
+    final CheckboxThemeData defaults;
+      switch (widget._checkboxType) {


Can we look and see if there is a way to reduce the number of switch statements? I am trying to consolidate Switch down to only have one platform switch statement, so the code is less complex.

victorsanni added 9 commits April 29, 2024 11:44

Sandbox to play around with async

d12baed

change to original

725c7cb

Functionality to make user decide if they want to rebuild options view

2a8a496

Apply painting and theme data adaptations

3586b8d

Merge branch 'flutter:master' into checkbox-adaptive

7a9488d

Use Design spec enum

8ba87e0

Make existing checkbox tests pass

4a1a8e8

Add test for mouse cursor

b1d6b4b

Minor formatting changes

18f2635

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels May 6, 2024

victorsanni requested review from Piinks and QuncCccccc May 6, 2024 21:54

victorsanni added 3 commits May 6, 2024 14:56

Fixed typo

8bfa0fc

Add period to the end of comment

ab194c6

Merge branch 'master' into checkbox-adaptive

2cdebb9

victorsanni requested a review from HansMuller May 6, 2024 22:18

Change design spec enum

60be83e

Piinks reviewed May 6, 2024

View reviewed changes

packages/flutter/lib/src/material/checkbox.dart Outdated Show resolved Hide resolved

Update checkbox list tile documentation

b9ca7b9

QuncCccccc reviewed May 7, 2024

View reviewed changes

Use switch statements instead

a0fcdcc

victorsanni marked this pull request as ready for review May 7, 2024 18:33

victorsanni added 3 commits May 7, 2024 17:09

Darken checkbox when pressed to mirror iOS checkbox

4adda6b

Consolidate cupertino checkbox painter into checkbox

5f6f3e8

Merge branch 'master' into checkbox-adaptive

8c6d086

Piinks reviewed May 8, 2024

View reviewed changes

victorsanni added 2 commits May 8, 2024 14:42

Remove unnecessary switch statements

d58679e

Remove all but one target platform switch statement

3ad8b25

victorsanni added 7 commits May 9, 2024 17:16

Add drop shadow with linear gradient

a0633c6

Merge branch 'master' into checkbox-adaptive

d32e403

Merge branch 'master' into checkbox-adaptive

270c9ef

Merge branch 'master' into checkbox-adaptive

d803f5e

Add adaptation theme to checkbox

81b95a5

Merge branch 'master' into checkbox-adaptive

a65757f

Tweak defaults and add example and test

a329285

github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels May 14, 2024

victorsanni added 4 commits May 14, 2024 16:40

Refine checkbox adaptive example tests

ac65ff6

Remove blank line from top of example file

145ef4d

Merge branch 'master' into checkbox-adaptive

889b15f

Fix typo

a5b167a

victorsanni removed the request for review from HansMuller May 15, 2024 02:43

victorsanni added 8 commits May 14, 2024 21:59

Tweak to make tests pass

7770943

Add test and fix issue with focus

11548db

Write painting tests

452f702

Change mouse cursor test

b3c6ab7

Merge branch 'master' into checkbox-adaptive

1e52333

Small lint changes

e5bf327

Add more tests

c7f888b

Add newline to EOF

9280b42

victorsanni marked this pull request as draft May 21, 2024 22:59

victorsanni mentioned this pull request May 21, 2024

Improve CupertinoCheckbox's fidelity and customizability #148804

Closed

9 tasks

victorsanni closed this Jun 11, 2024

victorsanni mentioned this pull request Jul 8, 2024

Improve CupertinoCheckbox fidelity #151441

Merged

9 tasks

victorsanni deleted the checkbox-adaptive branch July 1, 2025 20:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Make Checkbox adaptive without delegating to `CupertinoCheckbox` #147892

Make Checkbox adaptive without delegating to `CupertinoCheckbox` #147892

Uh oh!

victorsanni commented May 6, 2024 •

edited

Loading

Uh oh!

Piinks left a comment

Uh oh!

Uh oh!

QuncCccccc May 7, 2024

Uh oh!

QuncCccccc commented May 7, 2024

Uh oh!

Piinks May 8, 2024

Uh oh!

victorsanni May 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	///
	/// If a [CupertinoCheckbox] is created, the following parameters are ignored:
	/// [mouseCursor], [fillColor], [hoverColor], [overlayColor], [splashRadius],
	/// [materialTapTargetSize], [visualDensity], [isError]. However, [shape] and
	/// [side] will still affect the [CupertinoCheckbox] and should be handled if
	/// native fidelity is important.
	///

Make Checkbox adaptive without delegating to CupertinoCheckbox #147892

Make Checkbox adaptive without delegating to CupertinoCheckbox #147892

Uh oh!

Conversation

victorsanni commented May 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

QuncCccccc May 7, 2024

Choose a reason for hiding this comment

Uh oh!

QuncCccccc commented May 7, 2024

Uh oh!

Piinks May 8, 2024

Choose a reason for hiding this comment

Uh oh!

victorsanni May 8, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Make Checkbox adaptive without delegating to `CupertinoCheckbox` #147892

Make Checkbox adaptive without delegating to `CupertinoCheckbox` #147892

victorsanni commented May 6, 2024 •

edited

Loading