Title jumps during a CupertinoNavigationBar -> CupertinoNavigationBar hero transition #90589
Description
August 2024 update:
- Resolved in sliver version, not static one
- Related to CupertinoNavigationBar flickers when previousPageTitle more than 4 characters #149905
Steps to Reproduce
This issue is very similar to #45068 but it differs in one thing: I can reproduce similar text jumps with non default text Scale when the transition is done between two pages both using CupertinoSliverNavigationBar (in #45068 was a CupertinoSliverNavigationBar -> CupertinoNavigationBar and, in my tests, this issue is not present in the current SDK)
I'm using latest Flutter stable 2.5.1 and iOS 15. The issue is present both on simulator and physical devices.
Steps to reproduce the issue:
- Run
flutter create bug. - Update the
main.dartfile as follows:
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
void main() {
return runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
home: InitPage(),
);
}
}
class InitPage extends StatelessWidget {
const InitPage({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
double textScale = MediaQuery.of(context).textScaleFactor;
return CupertinoPageScaffold(
child: CustomScrollView(slivers: [
CupertinoSliverNavigationBar(
largeTitle: Text("${textScale == 1.0 ? "Good" : "BUGGY"} header"),
),
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Actual Scale: $textScale",
style: const TextStyle(fontSize: 30),
),
const Padding(padding: EdgeInsets.only(bottom: 20)),
CupertinoButton(
child: const Text("Push page >"),
color: CupertinoColors.systemRed,
onPressed: () => Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const SliverBugHeader(),
settings: const RouteSettings(name: "Title")))),
],
),
),
]));
}
}
class SliverBugHeader extends StatelessWidget {
const SliverBugHeader({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
double textScale = MediaQuery.of(context).textScaleFactor;
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
trailing: CupertinoButton(
child: const Text("Top right"),
padding: EdgeInsets.zero,
onPressed: () {},
),
largeTitle: Text("${textScale == 1.0 ? "Good" : "BUGGY"} header"),
),
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Actual Scale: $textScale",
style: const TextStyle(fontSize: 30),
),
const Padding(padding: EdgeInsets.only(bottom: 20)),
CupertinoButton(
child: const Text("Push new page >"),
color: CupertinoColors.systemRed,
onPressed: () => Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const SliverBugHeader(),
settings: const RouteSettings(name: "Title")),
)),
CupertinoButton(
child: const Text("< Pop page"),
color: CupertinoColors.systemBlue,
onPressed: () => Navigator.pop(context)),
],
),
)
],
),
);
}
}- Navigate with default text scale (1.0) between pages. The header should be fine. Then change the text scale (using
⌥⌘+and⌥⌘-on iOS simulator or control center shortcuts on physical devices) - Then navigate again between pages. The issue will be reproduced.
Expected results: Clear transitions like the ones that we're having with default scale.
Actual results: Unexpected text jumps in header elements font size when the transition is going to end.
Logs
N/A
[✓] Flutter (Channel stable, 2.5.1, on macOS 11.5.2 20G95 darwin-arm, locale
es-ES)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.60.1)
[✓] Connected device (3 available)
• No issues found!