Как реализовать скрытие Appbar и контейнера с фильтрами при скролле вниз в Flutter?

Содержимое статьи:

Шаги реализации:

1. Создайте контейнер с фильтрами в качестве отдельного виджета.
2. Добавьте его в качестве дочернего элемента SliverPersistentHeader в CustomScrollView.
   Код для создания контейнера с фильтрами:

   class FilterContainer extends StatelessWidget {
   
   const FilterContainer({Key? key}) : super(key: key);
   
   @override
   
   Widget build(BuildContext context) {
   
   return Container(
   
   height: 50,
   
   color: Colors.white,
   
   child: Row(
   
   children: [
   
   // Ваши кнопки фильтра
   
   ],
   
   ),
   
   );
   
   }
   
   }

   Код для добавления контейнера в CustomScrollView:

   class MyHomePage extends StatelessWidget {
   
   @override
   
   Widget build(BuildContext context) {
   
   return CustomScrollView(
   
   slivers: [
   
   SliverPersistentHeader(
   
   delegate: MySliverPersistentHeaderDelegate(
   
   minHeight: 60,
   
   maxHeight: 60,
   
   child: FilterContainer(),
   
   ),
   
   ),
   
   // Ваш SliverAppBar
   
   SliverGrid.builder(
   
   // Ваш код для построения тела с карточками
   
   ),
   
   ],
   
   );
   
   }
   
   }

   Дополнение:

   • SliverPersistentHeaderDelegate позволяет создавать пользовательские заголовки, которые могут оставаться закрепленными при прокрутке.
   • Указав minHeight и maxHeight, вы можете контролировать высоту контейнера с фильтрами.
   • Для удобства обслуживания создайте отдельный виджет FilterContainer.