Слушатель высоты контейнера

Question

Я пытаюсь создать панель поиска многократного использования, которую можно поместить поверх списка. Ниже приведен пример того, как это выглядит

Я привязал searchBar к ScrollController и, следовательно, могу уменьшить размер контейнера с помощью AnimatedContainer.

Проблема, с которой я столкнулся, заключается в том, что при открытии / закрытии панели поиска дочерние виджеты не исчезают, не уменьшаются и не появляются заново. Ниже приведен пример.

Я пытаюсь создать для них AnimatedOpacity, но, похоже, мне нужен t ie AnimationController для контейнера сама прислушиваюсь к высоте.

Я могу прикрепить код, но я предполагаю, что мой вопрос - это подход.

• Я пробовал GlobalKey на контейнере, но не каждый scrollevent перехватывается, когда я анимирую полную растяжку контейнера, когда он вытягивается на 50% (до go это ощущение привязки).
• Я пробовал SizeChangedLayoutNotifier и получаю уведомление, но когда я t ie это для RenderObject, чтобы найти размер, я получаю ошибку «Построение запланировано во время кадра».

Любые другие идеи?

Answer 1

Спасибо @Mateen, Ваш ответ направил меня на тот факт, что мне придется передать изменения высоты в виджет Поиск.

Результат такой, как показано ниже.

Answer 2

Вы можете следовать этому руководству https://www.youtube.com/watch?v=FPcl1tu0gDs

ИЛИ

Вот небольшой пример ожидаемого результата:

SliverAppBar(
  expandedHeight: _width / 3.0,
  backgroundColor: Colors.white,
  leading: InkWell(
    onTap: () => Navigator.of(context).pop(),
    child: Container(
      alignment: Alignment.center,
      child: Container(
          width:  30,
          height: 30,
        alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: Icon(Icons.arrow_back,)),
    ),
  ),


  elevation: 0.1,

  title: Container(
    margin: EdgeInsets.only(
      left: 16,
    ),
    child: Text(
      "${widget.title}",
      style: TextStyle(
          color: AppTheme.black, fontSize: 24, fontWeight: FontWeight.w600),
    ),
  ),



  floating: true,
  pinned: true,
  snap: false,
  stretch: true,
  centerTitle: false,

// here is custom app searcbar
  flexibleSpace: CustomSearchHeader(
    color: [
      AppTheme.white,
      AppTheme.white,
    ],
    context: context,
    width: _width,
    height: _height,
    onChange: (String value) {
      _jobBloc.add(SearchAddress(listData: _listData, query: value));
    },
  ),
);