Note: This issue began occurring after I updated Flutter to version 3.27.3
.
I'm encountering an issue on iOS where the CupertinoNavigationBar
(provided by PlatformAppBar
) remains transparent or partially transparent until the user scrolls. Once scrolling begins, the specified background color appears as expected.
I've tried the following, but the issue persists:
backgroundColor
directly in the cupertino: (_, __) => CupertinoNavigationBarData(...)
.transitionBetweenRoutes: false
.SafeArea
widgets and ensuring no overlapping content.CupertinoSliverNavigationBar
.extendBodyBehindAppBar
.PlatformScaffold
+ PlatformAppBar
.Despite all these steps, the bar still appears transparent on the initial frame until the user scrolls.
Here you can see the navigation bar appears transparent at first and After scrolling, it becomes fully colored.
Before Scrolling
After Scrolling
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return PlatformScaffold(
appBar: PlatformAppBar(
cupertino: (_, __) => CupertinoNavigationBarData(
backgroundColor: Colors.blueGrey,
transitionBetweenRoutes: false,
title: const Text('iOS Title'),
),
),
body: ListView(
children: List.generate(
30,
(index) => SizedBox(
height: 50,
child: Center(
child: Text('Item $index'),
),
),
),
),
);
}
}
3.27.3
3.6.1
7.0.1
The navigation bar should appear with the specified background color immediately when the page loads—fully opaque and without any translucent effect.
On iOS, the navigation bar looks transparent (the list items can be seen behind it) until the user starts to scroll. Once scrolling begins, the navbar background color becomes fully opaque.