Cupertino transparent navigation bars (#149102)

This PR is making the `CupertinoNavigationBar` and `CupertinoSliverNavigationBar` appear transparent as long as the content is not scrolled under them, so they look like standard iOS apps nav bars.

https://github.com/flutter/flutter/assets/423393/eee2700b-2a91-4577-922c-6163d47cb357

https://github.com/flutter/flutter/assets/423393/3847f2b5-0dac-4d5e-aa6f-03c1d2893e30

<details>
  <summary>Demo app code</summary>

  ```dart
import 'package:flutter/cupertino.dart';

/// Flutter code sample for [CupertinoTabScaffold].

void main() => runApp(const TabScaffoldApp());

class TabScaffoldApp extends StatefulWidget {
  const TabScaffoldApp({super.key});

  @override
  State<TabScaffoldApp> createState() => _TabScaffoldAppState();
}

class _TabScaffoldAppState extends State<TabScaffoldApp> {
  Brightness _brightness = Brightness.light;

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: CupertinoThemeData(brightness: _brightness),
      home: TabScaffoldExample(
          brightness: _brightness, onBrightnessToggle: _toggleBrightness),
    );
  }

  void _toggleBrightness() {
    setState(() {
      _brightness =
          _brightness == Brightness.light ? Brightness.dark : Brightness.light;
    });
  }
}

class TabScaffoldExample extends StatefulWidget {
  const TabScaffoldExample(
      {required this.brightness, required this.onBrightnessToggle, super.key});

  final VoidCallback onBrightnessToggle;
  final Brightness brightness;

  @override
  State<TabScaffoldExample> createState() => _TabScaffoldExampleState();
}

class _TabScaffoldExampleState extends State<TabScaffoldExample> {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search_circle_fill),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.person_fill),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.settings_solid),
            label: 'Settings',
          ),
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        return CupertinoTabView(
          builder: (BuildContext context) {
            return CupertinoPageScaffold(
              backgroundColor: index == 3
                  ? CupertinoColors.secondarySystemBackground
                      .resolveFrom(context)
                  : null,
              child: CustomScrollView(
                slivers: [
                  CupertinoSliverNavigationBar(
                    largeTitle: Text('Tab $index'),
                    initiallyTransparent: index != 2,
                    trailing: CupertinoButton(
                      padding: EdgeInsets.zero,
                      onPressed: widget.onBrightnessToggle,
                      child: Icon(
                        widget.brightness == Brightness.light
                            ? CupertinoIcons.moon_stars
                            : CupertinoIcons.sun_max,
                      ),
                    ),
                  ),
                  SliverSafeArea(
                    top: false,
                    sliver: SliverList.list(
                      children: [
                        CupertinoButton(
                          child: const Text('Next page'),
                          onPressed: () {
                            Navigator.of(context).push(
                              CupertinoPageRoute<void>(
                                builder: (BuildContext context) {
                                  return CupertinoPageScaffold(
                                    navigationBar: CupertinoNavigationBar(
                                      middle: Text('Inner page of tab $index'),
                                    ),
                                    child: ListView(
                                      children: [
                                        Center(
                                          child: CupertinoButton(
                                            child: const Text('Back'),
                                            onPressed: () {
                                              Navigator.of(context).pop();
                                            },
                                          ),
                                        ),
                                        if (index == 0) const _LongList(),
                                        const SizedBox(height: 20),
                                      ],
                                    ),
                                  );
                                },
                              ),
                            );
                          },
                        ),
                        if (index == 1) const _LongList(),
                        const SizedBox(height: 20),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

class _LongList extends StatelessWidget {
  const _LongList();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (int i = 0; i < 50; i++) ...[
          CupertinoListTile(
            leading: const Icon(CupertinoIcons.book),
            title: Text('Bookstore item $i'),
          ),
        ],
      ],
    );
  }
}
  ```
</details>

This is the continuation of https://github.com/flutter/flutter/pull/142439.

I tried to keep the simplest API possible, so it's only introducing a new `automaticBackgroundVisibility` boolean parameter.

In the implementation I had to use the `CupertinoPageScaffold` background color to make it look transparent instead of a 0 opacity, because of issues with route transitions.

I used an `InheritedWidget` so the nav bar is always getting the right background color from the parent scaffold, whether it is overridden or not. It would probably be better to make the inherited widget private but we'd need to move all the nav bar code to the same file as the scaffold, so for now I've just hidden it from the export. Let me know if it is okay to do that.

This PR is not dealing with the bottom tab bar, because the same [straightforward approach](https://github.com/veloce/flutter/commit/dde8ec6dc766036f73183ef8d6dedfe7ef49f082) doesn't work here. The problem is that the scroll notification is sent only when the scroll view is created or updated, so it doesn't work if one pushes a screen and navigates back.

Issues:
- #78607
- #60411
https://dart.googlesource.com/external/github.com/flutter/flutter/+/6e246ac85495ff3946dc0bbb4ce2f87eae7b144f
2 files changed
tree: 1efa0febe427740815bc504aa504e99c9957ba2b
  1. ci/
  2. tools/
  3. .gitignore
  4. commits.json
  5. DEPS
  6. OWNERS
  7. README.md
README.md

Monorepo

A gclient solution for checking out Dart and Flutter source trees

Monorepo is:

  • Optimized for Tip-of-Tree testing: The Monorepo DEPS used to check out Dart and Flutter dependencies comes from the Flutter engine DEPS with updated dependencies from Dart.

Checking out Monorepo

With depot_tools installed and on your path, create a directory for your monorepo checkout and run these commands to create a gclient solution in that directory:

mkdir monorepo
cd monorepo
gclient config --unmanaged https://dart.googlesource.com/monorepo
gclient sync -D

This gives you a checkout in the monorepo directory that contains:

monorepo/
  DEPS - the DEPS used for this gclient checkout
  commits.json - the pinned commits for Dart, flutter/engine,
                 and flutter/flutter
  tools/ - scripts used to create monorepo DEPS
engine/src/ - the flutter/buildroot repo
    flutter/ - the flutter/engine repo
    out/ - the build directory, where Flutter engine builds are created
    third_party/ - Flutter dependencies checked out by DEPS
      dart/ - the Dart SDK checkout.
        third_party - Dart dependencies, also used by Flutter
flutter/ - the flutter/flutter repo

Building Flutter engine

Flutter's instructions for building the engine are at Compiling the engine

They can be followed closely, with a few changes:

  • Googlers working on Dart do not need to switch to Fuchsia's Goma RBE, except for Windows. The GOMA_DIR enviroment variable can just point to the .cipd_bin directory in a depot_tools installation, and just goma_ctl ensure_start is sufficient.
  • The --no-prebuilt-dart-sdk option has to be added to every gn command, so that the build is set up to build and use a local Dart SDK.
  • The --full-dart-sdk option must be added to gn for the host build target if you will be building web or desktop apps.

Example build commands that work on linux:

MONOREPO_PATH=$PWD
if [[ ! $PATH =~ (^|:)$MONOREPO_PATH/flutter/bin(:|$) ]]; then
  PATH=$MONOREPO_PATH/flutter/bin:$PATH
fi

export GOMA_DIR=$(dirname $(command -v gclient))/.cipd_bin
goma_ctl ensure_start

pushd engine/src
flutter/tools/gn --goma --no-prebuilt-dart-sdk --unoptimized --full-dart-sdk
autoninja -C out/host_debug_unopt
popd

Building Flutter apps

The Flutter commands used to build and run apps will use the locally built Flutter engine and Dart SDK, instead of the one downloaded by the Flutter tool, if the --local-engine option is provided.

For example, to build and run the Flutter spinning square sample on the web platform,

MONOREPO_PATH=$PWD
cd flutter/examples/layers
flutter --local-engine=host_debug_unopt \
  -d chrome run widgets/spinning_square.dart
cd $MONOREPO_PATH

To build for desktop, specify the desktop platform device in flutter run as -d macos or -d linux or -d windows. You may also need to run the command

flutter create --platforms=windows,macos,linux

on existing apps, such as sample apps. New apps created with flutter create already include these support files. Details of desktop support are at Desktop Support for Flutter

Testing

Tests in the Flutter source tree can be run with the flutter test command, run in the directory of a package containing tests. For example:

MONOREPO_PATH=$PWD
cd flutter/packages/flutter
flutter test --local-engine=host_debug_unopt
cd $MONOREPO_PATH

Troubleshooting

Please file an issue or email the dart-engprod team with any problems with or questions about using monorepo.

We will update this documentation to address them.

  • flutter commands may download the engine and Dart SDK files for the configured channel, even though they will be using the local engine and its SDK.

Windows

  • On Windows, gclient sync needs to be run in an administrator session, because some installed dependencies create symlinks.