Skip to content

[BUG] [IOS] Navbar text jumps during a CupertinoSliverNavigationBar -> CupertinoNavigationBar transition #45068

Closed

Description

@ignatevdev

Steps to Reproduce

  1. Create an application with 2 screens, one having a CupertinoSliverNavigationBar and another with a CupertinoNavigationBar.
  2. Connect those screens with a CupertinoApp via onGenerateRoute.
  3. Make a transition from a screen with a sliver to a screen with a normal navbar and then go back.
  4. Observe a weird font size jump after the end of the transition

To make things clear I have made a video of this bug:
https://mega.nz/#!Tsl3FQJI!XW6RupT3oWgatozAlcBeGJaierNIoipr5_3lVpvqX7k

This issue occurs on the current stable (v1.9.1+hotfix.6) and the latest dev (v1.12.2) versions.

I am not sure if this is a real bug or I am doing something wrong with my navigation, but I don't see any clear mistakes either, so it would be really nice to receive some feedback.

Here is my current application code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

import 'dart:developer';
import 'dart:ui';

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  return runApp(CupertinoDictionaryApp());
}

class CupertinoDictionaryApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/':
            return CupertinoPageRoute(
              title: 'Languages',
              builder: (_) => HomeScreen(), settings: settings
            );
          case LanguageScreen.routeName:
            final LanguageScreenArguments args = settings.arguments;

            return CupertinoPageRoute(
              title: args.language,
              builder: (_) => LanguageScreen(), settings: settings
            );
        }
      }
    );
  }
}

class LanguageScreenArguments {
  final String language;

  LanguageScreenArguments(this.language);
}

class LanguageScreen extends StatelessWidget {
  static const routeName = '/language';

  final String argument;

  const LanguageScreen({Key key, this.argument}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final LanguageScreenArguments args = ModalRoute.of(context).settings.arguments;

    log(args.toString());

    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        // backgroundColor: Color.fromRGBO(255, 255, 255, 1),
      ),
      child: Container(
        child: Text(args.language)
      )
    );
  }
}

class HomeScreen extends StatelessWidget {
  final _itemExtent = 56.0;
  final generatedList = ["Russian", "English", "Finnish"];

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CustomScrollView(
        slivers: [
          CupertinoSliverNavigationBar(),
          SliverFixedExtentList(
            itemExtent: _itemExtent,
            delegate: SliverChildBuilderDelegate(
              (context, index) => LanguageItem(
                text: generatedList[index],
                onPressed: () {
                  Navigator.pushNamed(
                    context,
                    LanguageScreen.routeName,
                    arguments: LanguageScreenArguments(
                      generatedList[index]
                    )
                  );
                },
              ),
              childCount: generatedList.length,
            ),
          )
        ],
      ),
    );
  }
}

class LanguageItem extends StatefulWidget {
  const LanguageItem({@required this.text, @required this.onPressed});

  final String text;
  final Function onPressed;

  @override
  _LanguageItemState createState() => _LanguageItemState();
}

class _LanguageItemState extends State<LanguageItem> {
  bool _tapped = false;

  void toggleTappedState(bool newTapped) {
    setState(() {
      _tapped = newTapped;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        toggleTappedState(true);
      },
      onTapUp: (TapUpDetails details) {
        toggleTappedState(false);
      },
      onTap: widget.onPressed,
      behavior: HitTestBehavior.translucent,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(width: 1.0, color: Color.fromRGBO(0, 0, 0, 0.1)),
          ),
          color: _tapped ? Color.fromRGBO(0, 0, 0, 0.1) : null,
        ),
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(  
              widget.text,
            )
          ],
        )
      )
    );
  }
}

Target Platform:: iOS
Target OS version/browser:: 13.1.2 / 13.2.2
Devices:: iPhone 7 Plus

Logs

   info • This function has a return type of 'CupertinoPageRoute', but doesn't end with a return statement
          • lib/main.dart:21:24 • missing_return
[✓] Flutter (Channel dev, v1.12.2, on Mac OS X 10.15.1 19B88, locale en-RU)
    • Flutter version 1.12.2 at /Users/NSLS/flutter
    • Framework revision 6de6267942 (4 days ago), 2019-11-13 14:37:20 -0800
    • Engine revision b358dc58fb
    • Dart version 2.7.0

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at /Users/NSLS/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.0
    • ANDROID_HOME = /Users/NSLS/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.2.1, Build version 11B500
    • CocoaPods version 1.8.4

[!] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

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

[✓] Connected device (1 available)
    • Anton’s iPhone • 42e34348c456438ca88d792f317a971fc63acd39 • ios • iOS 13.1.2

! Doctor found issues in 2 categories.

Activity

  1. added
    p: cupertino_uicupertino_ui package in flutter/packages
    f: routesNavigator, Router, and related APIs.
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Nov 18, 2019
  2. justinmc commented on Dec 4, 2019

    @justinmc
    Contributor

    I actually can't reproduce this on master, can you? It may have been recently fixed.

    I tried on the iOS 13 simulator, a physical iPhone 7 running iOS 13, and a physical Android device, and none of them had the problem.

  3. added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Dec 4, 2019
  4. ignatevdev commented on Dec 4, 2019

    @ignatevdev
    Author

    Well, I have just tried to reproduce it on the latest version of flutter and the issue still remains. I have also tried deleting my current flutter installation, downloading it from the website, upgrading to the current master and recreating the project, but no luck still.

    It seems like something is messing up my build on the device, because I can't see the problem on the simulator, but since almost no one has reported the same issue, I will close this issue, but it's really sad that those artifacts can occur and there is almost no way to track them down.

  5. removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Dec 4, 2019
  6. justinmc commented on Dec 4, 2019

    @justinmc
    Contributor

    Alright, strange. If anyone else runs into this problem, please leave a comment with how you were able to reproduce it and I'll check it out.

  7. praven07 commented on Dec 11, 2019

    @praven07

    I've been having the same issue. I opened an issue about it here #42759. I've added the code used and the screenshots.

  8. alxmoroz commented on Feb 26, 2021

    @alxmoroz

    reproduced with changed font size in system settings

  9. github-actions commented on Aug 5, 2021

    @github-actions

    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.

  10. locked as resolved and limited conversation to collaborators on Aug 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

f: routesNavigator, Router, and related APIs.frameworkflutter/packages/flutter repository. See also f: labels.p: cupertino_uicupertino_ui package in flutter/packages

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions