Dark navigation bar icon brightness (Android) is lost when navigating back from card entry

[rmorrin]

Describe the issue

We have discovered an unusual issue that seems to 'reset' the navigation bar icon brightness on Android set by SystemChrome.setSystemUIOverlayStyle but only under specific circumstances.

For context, our app makes use of a white navigation bar, with the navigation bar icon brightness set to Brightness.dark for contrast:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarColor: Colors.white,
  systemNavigationBarIconBrightness: Brightness.dark,
));

We noticed that every time the card entry flow was finished (either by cancelling or completing card entry), the navigation bar icons would be reset to white upon returning back to the Flutter application. This results in an unappealing/broken looking nav bar:
.

I first tried to recreate the problem in the example app (Super Cookie) in this repo but was initially unsuccessful. It wasn't until I had stripped both both applications back to the most minimal reproducible example I noticed one key difference - the example app doesn't use an AppBar. Strangely, introducing an AppBar to the top-level scaffold in the example app immediately shows issue.

To Reproduce

Below is a one file example which shows the problem. There is also a repo available at: https://github.com/rmorrin/square-navbar-repro which includes comparison of the different behaviour when the plugin is launched from pages with and without an AppBar. This is all using v1.7.1 of the package, which is the latest at the time of writing.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:square_in_app_payments/in_app_payments.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            primary: Colors.white,
            backgroundColor: Colors.blue,
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    _setSystemChrome();
    _initSquarePayment();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: TextButton(
          child: Text(
            'Pay Now',
          ),
          onPressed: () async {
            await InAppPayments.startCardEntryFlow(
              onCardNonceRequestSuccess: (_) => InAppPayments.completeCardEntry(
                onCardEntryComplete: () => debugPrint('Payment complete'),
              ),
              onCardEntryCancel: () => debugPrint('Card entry cancelled'),
              collectPostalCode: true,
            );
          },
        ),
      ),
    );
  }

  Future<void> _initSquarePayment() async {
    await InAppPayments.setSquareApplicationId('REPLACE_ME');
  }

  void _setSystemChrome() {
    // Setup the status bar colors
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );
  }
}

Expected behavior

Previously set nav bar icon brightness is restored when returning back to Flutter application from the card entry screen. Behaviour should be equivalent regardless of whether the calling page includes an AppBar.

Environment:

• Platform: Android
• OS and version: 11 (RQ2A.210505.002) but occurs on other Android versions also
• dev environment: macOS
• In-App Payments Plugin version: 1.7.1

$ flutter doctor -v
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en-GB)
    • Flutter version 2.0.3 at /Users/ryan/Development/flutter
    • Framework revision 4d7946a68d (3 months ago), 2021-03-18 17:24:33 -0700
    • Engine revision 3459eb2436
    • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/ryan/Library/Android/sdk
    • Platform android-S, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (1 available)
    • Android SDK built for x86 (mobile) • emulator-5556 • android-x86 • Android 10 (API 29) (emulator)

• No issues found!

Screenshots

Example page with AppBar (notice broken nav bar icons)

Example page without AppBar (working as expected)

Additional context

I did find a potential workaround which involves calling SystemChrome.setSystemUIOverlayStyle again in the various card entry flow callbacks. While this does work, it's obviously not ideal and there's also a brief flash of the nav bar in its broken state before the SystemChrome is updated.

Any advice you could offer on how to resolve this would be hugely appreciated, I've tried various combinations of different theme settings and options within the native Android application, as well as a number of relevant AppBar/ThemeData properties, but nothing seems change this behaviour.