Складная панель приложений с поиском во флиутере

Question

Я хочу добиться чего-то подобного, используя SliverAppBar с TextField внутри для моего поиска. Когда пользователи прокручивают вверх, TextField должен прокручиваться вверх, прикрепляя себя к appBar. Однако мне не удалось этого добиться.

Это мой код:

return CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  stretch: false,
                  expandedHeight: 200.0,
                  floating: false, //This is not needed since it's default
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                    title: Container(
                      height: 50,
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Search",
                          fillColor: Colors.white,
                          filled: true,
                          suffixIcon: Icon(Icons.filter_list),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20.0),
                            borderSide: BorderSide(color: Colors.transparent),

                          ),
                          contentPadding:
                          EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0)
                        ),
                      ),
                    )
                  ),
                ),
                SliverFillRemaining(
                  child: new Center(
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Text(
                          'You have pushed the button this many times:',
                        ),
                        new Text(
                          '',
                          style: Theme
                              .of(context)
                              .textTheme
                              .display1,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            );

Мой поиск выходит за границы, когда appBar расширяется и не расширяется хорошо работает при прокрутке вверх. Что мне делать?

Answer 1

Вы можете использовать свойство FlexibleSpaceBar SilverAppBar. Ниже приведен фрагмент кода:

SliverAppBar(
     pinned: true,
     leading: IconButton(icon: Icon(Icons.menu), onPressed: () {},),
     expandedHeight: kExpandedHeight,
     title: _showTitle ? Text('_SliverAppBar') : null,
        flexibleSpace: _showTitle ? null : FlexibleSpaceBar(
           title: new Column(
           mainAxisAlignment: MainAxisAlignment.end,
           children: <Widget>[
               Text('_SliverAppBar'),
               TextField(
                    controller: _filter,
                    decoration: new InputDecoration(
                      prefixIcon: new Icon(Icons.search),
                      hintText: 'Search...'
                    ),
                  ),
                ],
              ),
              background: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Info'),
                ],
              ),
            ),
          )

Получается следующий результат.

Обычный:

Прокрутка вверх :