Repository navigation
Compact Visual Density is wrongfully applied to Checkboxes with MaterialTapTargetSize.padded on desktop platforms according to Material 3 Guidelines #156408
Description
Steps to reproduce
Create a simple widget tree with a checkbox that has a materialTapTargetSize: MaterialTapTargetSize.padded.
Run it on web.
Inspect its size.
Expected results
According to M3 guidelines, even if visual density is compact:
It’s important to keep accessibility in mind when you’re applying density to your UI. No matter the density, all touch targets should be at least `48px` in size.
https://m3.material.io/blog/material-density-web
So a Checkbox should always have a 48x48 touch target. Which does not happen if we use the default VisualDensity for desktop platforms.
Actual results
Because for desktop platforms there's a compact Visual Density being applied by default, it's shrinking components' touch targets like the Checkbox to sizes that are not accessible according to M3 (from 48 to 40 for example)
Additionally, this compact visual density that is applied by default is assuming that all UI on a desktop app (or desktop web app) are going to be very visually dense, when it's not always the case.
Is this an implementation mistake by the Flutter team? Are the M3 docs outdated?
Code sample
Code sample
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(
body: Checkbox(
materialTapTargetSize: MaterialTapTargetSize.padded,
value: true,
onChanged: (_) {},
),
),
);
}
}
Screenshots or Video
Checkbox size without overriding default Visual Density (which is VisualDensity.compact):
Checkbox size by overriding default Visual Density with VisualDensity.standard:
Logs
No response
Flutter Doctor output
Doctor output
~/repositories/checkbox_visual_density$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel [user-branch], 3.22.0, on macOS 14.6.1 23G93 darwin-arm64, locale en-PT)
! Flutter version 3.22.0 on channel [user-branch] at /opt/homebrew/Caskroom/flutter/3.0.4/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
! Upstream repository unknown source is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 16.0)
! iOS 18.0 Simulator not installed; this may be necessary for iOS and macOS development.
To download and install the platform, open Xcode, select Xcode > Settings > Platforms,
and click the GET button for the required platform.
For more information, please visit:
https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.3)
[✓] VS Code (version 1.92.2)
[✓] Connected device (5 available)
[✓] Network resources
! Doctor found issues in 3 categories.Metadata
Metadata
Assignees
Labels
Type
Projects
- Status
Activity
huycozy commentedon Oct 9, 2024
I checked this on macOS app target and see Checkbox's size is 40.0 from Devtools inspector as well. Reproduced this issue on the latest Flutter stable and master versions.
flutter doctor (stable and master)
Looks like I found the cause of this:
Per MaterialTapTargetSize.padded, the minimum tap target size should be 48x48 px:
flutter/packages/flutter/lib/src/material/theme_data.dart
Lines 167 to 173 in c077b8c
The passed value
MaterialTapTargetSize.paddedtoCheckbox.materialTapTargetSizeis correct here:flutter/packages/flutter/lib/src/material/checkbox.dart
Lines 516 to 525 in c077b8c
But the next line seems to cause the issue:
flutter/packages/flutter/lib/src/material/checkbox.dart
Line 526 in c077b8c
The
visualDensitydefault value is compact withVisualDensity(horizontal: -2.0, vertical: -2.0). When it's multiplied withbaseSizeAdjustment, it returns a newOffset(horizontal, vertical) * interval(interval is 4.0) = Offset(-8.0, -8.0).This causes Checkbox size down to (40.0, 40.0) as observed.
r-durao-pvotal commentedon Oct 9, 2024
@huycozy What is the ideal fix here? Should we add a check after adding the baseSizeAdjustment and reverting the sum if it breaks the 48 touch target rule?
huycozy commentedon Oct 10, 2024
I'm not sure of the proper fix for this now but I see we can work around this by overriding the Checkbox.visualDensity with
VisualDensity.standardin the meantime until having design team's opinion, then Checkbox size should be (48.0, 48.0) as desired.Fix `Checkbox` default visual density to meet Material 3 guidelines (#…
github-actions commentedon Feb 13, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.