-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Labels
P1High-priority issues at the top of the work listHigh-priority issues at the top of the work listcustomer: googleVarious Google teamsVarious Google teamsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.
Description
BackButtonIcon selects a style depending on the underlying OS. This applies even when the app is Flutter Web e.g. running Chrome on Mac OS. I think that on kIsWeb, we should instead always use 'Icons.arrow_back' regardless of the underlying OS.
Current logic in back_button.dart:
static IconData _getIconData(TargetPlatform platform) {
switch (platform) {
case TargetPlatform.android:
case TargetPlatform.fuchsia:
case TargetPlatform.linux:
case TargetPlatform.windows:
return Icons.arrow_back;
case TargetPlatform.iOS:
case TargetPlatform.macOS:
return Icons.arrow_back_ios;
}
}
As a user, this feels weird because this style of back button, which is famously required everywhere in native iOS apps, is not expected by material app users on Web. Rationale:
- Users expect that Web app UX features that are a property of the site (for traditional DOM-based sites) are consistent across platforms. E.g. while you expect Chrome to have different scroll physics on MacOS vs Windows, you expect a site to have the same iconography across these platforms.
- Material seems to use the iOS-like arrows for a different specific purpose other than 'back' on Web - paging through content. See gmail and calendar screenshots below. Both sites use the traditional Material back arrow icon to represent 'back'.
- Apple itself doesn't even seem use the iOS back button to mean 'back' on Web, in fact there is basically no stack-based navigation on apple.com or iCloud.com . Apple does use the iOS-like back arrow on web for paging which is consistent with the material sites above.
See Gmail screenshot:

Calendar screenshot:

Apple store screenshot:

Metadata
Metadata
Assignees
Labels
P1High-priority issues at the top of the work listHigh-priority issues at the top of the work listcustomer: googleVarious Google teamsVarious Google teamsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.