滚动动画，如yelp应用在颤抖中

Question

我正在尝试使CustomScrollView与此类似：

我正在使用SliverAppBar，但似乎这不是正确的方法。到目前为止，我的代码：

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 340,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: BackgroundImageWidget(),
              centerTitle: true,
              //  title: Text("Search by cities or activitry in Kreis Kleve"),
              title: SearchButtonWidget(),
              ),
            ),
          ),
          SliverList(...) 

我得到的是：

我不知道为什么起初SearchButtonWidget这么大。缩小后，它的大小正确。带有fliexibleSpace的sliverAppBar甚至是正确的方法吗？

编辑：有人还能告诉我如何使搜索按钮与下面的小部件重叠吗？我猜sliverAppBar无法做到这一点。

编辑2：也许是在图片下方添加了白色背景。我需要对此进行调查。

Answer 1

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverPersistentHeader(
              delegate: MySliverAppBar(
                  expandedHeight: 250,
                  title: Container(
                    margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 0),
                    decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.all(Radius.circular(5.0))),
                    child: Row(children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 20.0, right: 10.0),
                        child: Icon(Icons.search),
                      ),
                      Expanded(
                        child: TextFormField(
                          keyboardType: TextInputType.text,
                          textInputAction: TextInputAction.done,
                          cursorColor: Colors.black,
                          autofocus: false,
                          decoration: InputDecoration(
                              filled: true,
                              fillColor: Colors.transparent,
                              contentPadding: EdgeInsets.symmetric(
                                  vertical: 10, horizontal: 15),
                              hintText: "Search",
                              border: InputBorder.none,
                              disabledBorder: OutlineInputBorder(
                                borderSide:
                                    new BorderSide(color: Colors.transparent),
                                borderRadius: new BorderRadius.circular(2),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderSide:
                                    new BorderSide(color: Colors.transparent),
                                borderRadius: new BorderRadius.circular(2),
                              )),
                        ),
                      )
                    ]),
                  )),
              pinned: true,
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate((context, index) {
              return Container(
                  child: ListTile(
                title: Text("${index}a"),
              ));
            }, childCount: 25))
          ],
        ),
      ),
    );
  } 
。