Чтобы использовать виджет SliverPersistentHeaderво Flutter, вам необходимо обернуть его в CustomScrollViewи предоставить его как одну из полосокв CustomScrollView. Виджет SliverPersistentHeaderпозволяет создавать заголовок, который остается постоянным, пока содержимое прокручивается под ним. Вот несколько методов, которые можно использовать с примерами кода:

Метод 1: базовый SliverPersistentHeader

CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      delegate: MySliverPersistentHeaderDelegate(
        minHeight: 50.0,
        maxHeight: 200.0,
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text('Persistent Header'),
          ),
        ),
      ),
      pinned: true,
    ),
    // Add more slivers here
  ],
)

В этом примере мы создаем базовый SliverPersistentHeaderс минимальной высотой 50,0 и максимальной высотой 200,0. Заголовок содержит контейнер синего цвета с центрированным текстом.

Метод 2: пользовательский SliverPersistentHeaderDelegate

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  MySliverPersistentHeaderDelegate({
    required this.minHeight,
    required this.maxHeight,
  });
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Persistent Header'),
      ),
    );
  }
  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => maxHeight;
  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      delegate: MySliverPersistentHeaderDelegate(
        minHeight: 50.0,
        maxHeight: 200.0,
      ),
      pinned: true,
    ),
    // Add more slivers here
  ],
)

Этот метод предполагает создание специального класса SliverPersistentHeaderDelegate, который позволяет вам определять внешний вид и поведение заголовка. Вы можете настроить метод buildтак, чтобы он возвращал любой желаемый виджет.

Метод 3: SliverAppBar с гибким пространством

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Persistent Header'),
      ),
    ),
    // Add more slivers here
  ],
)

В этом методе вместо использования SliverPersistentHeaderмы используем виджет SliverAppBarсо свойством flexibleSpace. flexibleSpaceпозволяет вам установить любой виджет в качестве заголовка, включая виджет Textв этом примере.