Skip to content

Suggestion: CupertinoSliverNavigationBar allow forcing condensed title #59525

@cpboyd

Description

@cpboyd

Use case

See: iOS 13 Settings app search, App Store Search, or News app's Following tab search.

While searching and viewing results, the title is hidden.

My thoughts were something like this:

  Widget _buildSliverBar(BuildContext context) {
    return CupertinoSliverNavigationBar(
      middle: _isSearching
          ? TextField(
              autofocus: true,
              controller: _filter,
              decoration: InputDecoration(
                  hintText: 'Search by name...', border: InputBorder.none),
            )
          : null,
      largeTitle: _isSearching ? null : _buildTitle(),
      trailing: IconButton(
        icon: Icon(_isSearching ? Icons.clear : Icons.search),
        onPressed: () {
          setState(() {
            _isSearching = !_isSearching;
            if (!_isSearching) {
              _resetTitle();
            }
          });
        },
      ),
    );
  }

Alternatives: The built-in iOS apps that I mentioned probably actually behave by hiding the title bar and having a separate pinned search bar, e.g. SliverPersistentHeader. SliverPersistentHeader, however, doesn't seem to be very easily extensible.

SliverAppBar has a bottom option for easily appending a widget as well as allowing flexibleSpace (analogous to largeTitle) to be set to null, while placing widgets in title (analogous to middle).

Proposal

Proposal:

Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-15 at 23 33 49

Apple News app

IMG_0512
IMG_0513
IMG_0514

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: fidelityMatching the OEM platforms betterc: proposalA detailed proposal for a change to Flutterf: cupertinoflutter/packages/flutter/cupertino repositoryframeworkflutter/packages/flutter repository. See also f: labels.team-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions