flutter-layout - 如何在 SliverAppBar Flutter 上自定义搜索栏

Question

我是新来的。我想在 SliverAppBar 上自定义一个搜索小部件。

向上滚动时，我希望它显示这个搜索小部件，并带有一个灵活的几乎购物车按钮，如图所示。

代码

  final expandedHeight = 150.0;

  @override
  Widget build(BuildContext context) {
    final products = Provider.of<ProductProvider>(context).products;
    return Scaffold(
      key: _scaffoldKey,
      drawer: CuzAppDrawer(),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: expandedHeight,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: GestureDetector(
                  onTap: () => null,
                  child: Padding(
                    padding:
                        EdgeInsets.symmetric(horizontal: paddingThemeScreen()),
                    child: Container(
                        height: 30,
                        decoration: BoxDecoration(
                          color: nearlyWhite,
                          borderRadius: BorderRadius.circular(24),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const SizedBox(width: 10),
                            const Icon(Feather.search,
                                color: Colors.grey, size: 15),
                            const SizedBox(width: 5),
                            Text("Search product",
                                style: TextStyle(
                                    color: Colors.grey,
                                    fontSize: 12,
                                    fontWeight: FontWeight.w200))
                          ],
                        )),
                  ),
                ),
                background: Image.network(
                  "image-url",
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },

结果

预期结果