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

如何解决如何在 SliverAppBar flutter 上自定义搜索栏

我是颤振的新手。 我想在 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,];
        },

结果

预期结果