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.
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