flutter cupertinoslivernavigationbar like ios health app

Question

Trying to create a header using CupertinoSliverNavigationBar. I'm thinking of a UI like the Browse tap in the iOS health app.

• what I want

• what i did: blank largeTitle space under search field should be removed

CustomScrollView(
  slivers: [
    const CupertinoSliverNavigationBar(
      backgroundColor: CupertinoColors.black,
      largeTitle: Text('Title'),
      stretch: true,
    ),
    const CupertinoSliverNavigationBar(
      backgroundColor: CupertinoColors.black,
      transitionBetweenRoutes: false,
      leading: null,
      automaticallyImplyLeading: false,
      largeTitle: SizedBox.shrink(),
      middle: CupertinoSearchTextField(),
      alwaysShowMiddle: true,
    ),
    SliverToBoxAdapter(
      // List Items...
    ),
  ],
),

For this, I tried using two CupertinoSliverNavigationBar. However, I was not able to remove the empty largeTitle space in the second NavigationBar.

Is there a way to implement this UI?

Answer 1

sovled this problem with this way.

const CupertinoSliverNavigationBar(
  backgroundColor: CupertinoColors.black,
  largeTitle: Text(mixedSingles),
  stretch: true,
),
SliverPersistentHeader(
  delegate: SearchFieldHeaderDelegate(
    const CupertinoSearchTextField(),
  ),
  pinned: true,
),
SliverToBoxAdapter(
  // List Items...
),

// SearchFieldHeaderDelegate
class SearchFieldHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;
  final double height;

  SearchFieldHeaderDelegate(this.child, [this.height = 50]);

  @override
  Widget build(context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: CupertinoColors.black,
      alignment: Alignment.center,
      child: child,
    );
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => false;
}