flutter – PlatformAppBar stays clear till scrolling, even with specific backgroundColor [iOS]

flutter – PlatformAppBar stays clear till scrolling, even with specific backgroundColor [iOS]


Description

Be aware: This concern started occurring after I up to date Flutter to model 3.27.3.

I am encountering a difficulty on iOS the place the CupertinoNavigationBar (offered by PlatformAppBar) stays clear or partially clear till the person scrolls. As soon as scrolling begins, the required background shade seems as anticipated.

I’ve tried the next, however the concern persists:

  • Setting a totally opaque backgroundColor straight within the cupertino: (_, __) => CupertinoNavigationBarData(...).
  • Utilizing transitionBetweenRoutes: false.
  • Eradicating additional SafeArea widgets and making certain no overlapping content material.
  • Confirming I am not utilizing a large-title CupertinoSliverNavigationBar.
  • Disabling extendBodyBehindAppBar.
  • Testing a minimal code snippet with simply PlatformScaffold + PlatformAppBar.

Regardless of all these steps, the bar nonetheless seems clear on the preliminary body till the person scrolls.


Screenshots

Right here you’ll be able to see the navigation bar seems clear at first and After scrolling, it turns into totally coloured.

Earlier than Scrolling

After Scrolling

Steps to Reproduce

  1. Create a Flutter undertaking with flutter_platform_widgets (model 7.0.1).
  2. Use the next minimal code as your house web page:
import 'package deal:flutter/materials.dart';
import 'package deal:flutter_platform_widgets/flutter_platform_widgets.dart';
class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : tremendous(key: key);

  @override
  Widget construct(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        cupertino: (_, __) => CupertinoNavigationBarData(
          backgroundColor: Colours.blueGrey,
          transitionBetweenRoutes: false,
          title: const Textual content('iOS Title'),
        ),
      ),
      physique: ListView(
        kids: Listing.generate(
          30,
          (index) => SizedBox(
            peak: 50,
            baby: Heart(
              baby: Textual content('Merchandise $index'),
            ),
          ),
        ),
      ),
    );
  }
}

Atmosphere

  • Flutter model: 3.27.3
  • Dart model: 3.6.1
  • flutter_platform_widgets model: 7.0.1
  • Goal platform: iOS (examined on iOS simulator and/or actual machine)
  • System/Simulator model: iPhone 14, iOS 16 (for instance)

Anticipated Habits

The navigation bar ought to seem with the required background shade instantly when the web page masses—totally opaque and with none translucent impact.


Precise Habits

On iOS, the navigation bar seems to be clear (the record objects may be seen behind it) till the person begins to scroll. As soon as scrolling begins, the navbar background shade turns into totally opaque.

rooshohttps://www.roosho.com
I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here


Latest Articles