Skip to content

CupertinoNavigationBar/CupertinoSliverNavigationBar previous route title replacement logic differs from native iOS #40583

Open
Open
CupertinoNavigationBar/CupertinoSliverNavigationBar previous route title replacement logic differs from native iOS#40583
Labels
P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterf: routesNavigator, Router, and related APIs.found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.platform-iosiOS applications specificallyteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@s0nerik
s0nerik
opened on Sep 16, 2019

Currently, the back button title is replaced with "Back" only when the previous route title is longer than 12 characters, which doesn't seem to match the native iOS logic.

The attached screenshots demonstrate how native iOS navigation bar replaces the previous route title only when there's not enough room to fit the title.

A common parent route:

Back button title is "Back" instead of "Keyboards" since there's not enough room to fit it:

Back button title is "Keyboards" since there's enough room to fit it:

Flutter version:

Flutter 1.9.1+hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2d2a1ffec9 (9 days ago) • 2019-09-06 18:39:49 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0

Activity

  1. BondarenkoStas
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    platform-iosiOS applications specifically
    on Sep 16, 2019
  2. LongCatIsLooong
    added
    p: cupertino_uicupertino_ui package in flutter/packages
    f: routesNavigator, Router, and related APIs.
    on Sep 16, 2019

  3. justinmc commented on Sep 24, 2019

    @justinmc
    justinmc
    on Sep 24, 2019
    Contributor

    I see this behavior as well. It seems to be hardcoded to use "Back" when the string is over 12 characters:

    flutter/packages/flutter/lib/src/cupertino/nav_bar.dart

    Lines 1392 to 1394 in 4815b26

    if (previousTitle.length > 12) {
    textWidget = const Text('Back');
    }

    Here's a quick app I wrote to demo the problem:

    back_overflow

    https://gist.github.com/justinmc/818dfffdf3fa21939d0160c7bb510ff2

    I guess ideally Flutter should only change it to "Back" if it collides with the center label? Can anyone confirm that's what native iOS does?

  4. markusaksli-nc commented on Sep 15, 2020

    @markusaksli-nc
    markusaksli-nc
    on Sep 15, 2020
    Contributor

    Native seems to try to truncate the title first?

    In any case this remains hardcoded and doesn't match native

    flutter/packages/flutter/lib/src/cupertino/nav_bar.dart

    Lines 1439 to 1441 in 37b03ec

    if (previousTitle.length > 12) {
    textWidget = const Text('Back');
    }

  5. markusaksli-nc
    added
    found in release: 1.22Found to occur in 1.22
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Sep 15, 2020

  6. Freelenzer commented on Feb 10, 2021

    @Freelenzer
    Freelenzer
    on Feb 10, 2021

    This should at least be documented.

    Same issue as here:

    #50941

  7. maheshj01 commented on Dec 9, 2022

    @maheshj01
    maheshj01
    on Dec 9, 2022
    Member

    The issue reproduces on stable 3.3 and masters 3.7,

    Notice that in Native behavior when the title is too long the leading has a back button icon only

    Native IOS Flutter
    Screen.Recording.2022-12-09.at.1.43.52.PM.mov
    Screen.Recording.2022-12-09.at.1.45.37.PM.mov
    code sample 
    import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      routes: {
        '/': (_) => const MyHomePage(),
        'good': (_) => GoodPage(),
        'overflowing-back': (_) => OverflowingBackPage(),
        'overflowing-title': (_) => OverflowingTitlePage(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
 const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar:const CupertinoNavigationBar(
        middle: Text('Cupertino back button demo'),
      ),
      child: Center(
        child: CupertinoButton(
          child: const Text('Next'),
          onPressed: () {
            Navigator.pushNamed(context, 'good');
          },
        ),
      ),
    );
  }
}

class GoodPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        previousPageTitle: 'Home',
        middle: Text('No problems here'),
      ),
      child: Center(
        child: CupertinoButton(
          child: const Text('Next'),
          onPressed: () {
            Navigator.pushNamed(context, 'overflowing-back');
          },
        ),
      ),
    );
  }
}

class OverflowingBackPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        previousPageTitle: 'Longer than 12 by far',
        middle: Text('Previous name too long'),
      ),
      child: Center(
        child: CupertinoButton(
          child: Text('Next'),
          onPressed: () {
            Navigator.pushNamed(context, 'overflowing-title');
          },
        ),
      ),
    );
  }
}

class OverflowingTitlePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        previousPageTitle: 'Overflow',
        middle: Text('This title is so long that it wraps, but the back button is not truncated'),
      ),
      child: Center(
        child: CupertinoButton(
          child: const Text('Back to home'),
          onPressed: () {
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
      ),
    );
  }
}
    flutter doctor -v (mac) 
    [✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
      to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.55.20221129

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

    [✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.53.20221101

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
  8. maheshj01
    added
    found in release: 3.3Found to occur in 3.3
    found in release: 3.7Found to occur in 3.7
    a: fidelityMatching the OEM platforms better
    and removed
    found in release: 1.22Found to occur in 1.22
    on Dec 9, 2022
  9. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-iosOwned by iOS platform team
    triaged-iosTriaged by iOS platform team
    on Jul 8, 2023
  10. stuartmorgan-g
    added
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    and removed
    team-iosOwned by iOS platform team
    triaged-iosTriaged by iOS platform team
    on Jul 17, 2023
  11. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024
  12. victorsanni
    added this to Cupertino Refreshon Aug 22, 2024
  13. Piinks
    moved this to Todo in Cupertino Refreshon Aug 26, 2024
  14. Piinks
    added
    P2Important issues not at the top of the work list
    on Dec 11, 2024
  15. dkwingsmt
    removed this from Cupertino Refreshon Jan 16, 2025
  16. Piinks
    added
    packageflutter/packages repository. See also p: labels.
    and removed
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Aug 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterf: routesNavigator, Router, and related APIs.found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.platform-iosiOS applications specificallyteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions