Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] PlatformAppBar remains transparent until scrolling, even with explicit backgroundColor #471

Open
MostafaHamed-W opened this issue Jan 31, 2025 · 0 comments

Comments

@MostafaHamed-W
Copy link

MostafaHamed-W commented Jan 31, 2025

Title: [iOS] AppBar remains transparent until scrolling, even with explicit backgroundColor


Description

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:

  • Setting a fully opaque backgroundColor directly in the cupertino: (_, __) => CupertinoNavigationBarData(...).
  • Using transitionBetweenRoutes: false.
  • Removing extra SafeArea widgets and ensuring no overlapping content.
  • Confirming I'm not using a large-title CupertinoSliverNavigationBar.
  • Disabling extendBodyBehindAppBar.
  • Testing a minimal code snippet with just PlatformScaffold + PlatformAppBar.

Despite all these steps, the bar still appears transparent on the initial frame until the user scrolls.


Screenshots

Here you can see the navigation bar appears transparent at first and After scrolling, it becomes fully colored.

Steps to Reproduce

  1. Create a Flutter project with flutter_platform_widgets (version 7.0.1).
  2. Use the following minimal code as your home page:
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'),
            ),
          ),
        ),
      ),
    );
  }
}

Environment

  • Flutter version: 3.27.3
  • Dart version: (output of 3.6.1)
  • flutter_platform_widgets version: 7.0.1
  • Target platform: iOS (tested on iOS simulator and/or real device)
  • Device/Simulator version: iPhone 14, iOS 16 (for example)

Expected Behavior

The navigation bar should appear with the specified background color immediately when the page loads—fully opaque and without any translucent effect.


Actual Behavior

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant