Skip to content

BackButtonIcon should never use iOS/MacOS style when running on Web #107646

@jacobsimionato

Description

@jacobsimionato

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:
Gmail screenshot
Calendar screenshot:
Calendar screenshot
Apple store screenshot:
Apple back icon

Metadata

Metadata

Assignees

No one assigned

    Labels

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

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions