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

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:

Since BackButton is a widget in the Material library, following what Material Web does in web browsers seems to be the correct solution.

A related issue, which goes beyond this widget, is that Flutter lacks a generic, minimally-styled widget set from which users can build custom widgets.

@InMatrix

Thanks for taking a look @InMatrix ! In this case, I believe we should update the _getIconData logic to always use Icons.arrow_back for web (i.e. kIsWeb), as I believe Material Web library always uses this icon.

Is Flutter Framework eng team comfortable with this change?

PlatformAdaptiveIcons has the same problem as _getIconData. There is an _isCupertino() method that (incorrectly) returns true for TargetPlatform.macOS regardless of whether it is running in a web browser. Among other things, this means that overflow menus created using PopupMenuButton will use the wrong icon by default on macOS web.

Will try to get this issue resolved as part of #118229

Add ActionButtonIconsData for overriding action icons (#118229)

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

InMatrix commented on Jul 29, 2022

jacobsimionato commented on Aug 2, 2022

Caffeinix commented on Aug 12, 2022

HansMuller commented on Jan 13, 2023

github-actions commented on Mar 8, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions