How can I modify the SliverAppbar widget to get the following layout / Integrate a TextInputField searchBar inside a SliverAppbar

Question

I want to achieve the following layout:

Layout Link

So far I am using Sliver. But the problem is the SearchBar! I want the SliverAppBar to be exactly like the layout and pinned to the top. Any Suggestions?

I have tried to achieve the solution from this link but the problem is the appbar itself pinned to the top not the flexibleSpacebar!

How to implement a SliverAppBar with a collapsable search bar

Here is what I have tried so far:

The Parent Sliver:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5),
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                automaticallyImplyLeading: false,
                pinned: true,
                floating: true,
                expandedHeight: 80,
                titleSpacing: 0,
                backgroundColor: Colors.white,
                elevation: 1.0,
                flexibleSpace: FlexibleSpaceBar(
                  background: _searchCard(),
                ),
              ),
              SliverToBoxAdapter(
                child: _shopListTitle(),
              ),
              SliverToBoxAdapter(
                child: SizedBox(height: 15),
              ),
              SliverToBoxAdapter(
                child: ScrollableBadges(),
              ),
              SliverToBoxAdapter(
                child: SizedBox(height: 15),
              ),
              GridList(),
            ],
          ),
        ),
      ),
    );
  }

SearchBar Widget:

Widget _searchCard() => Container(
      child: Card(
        color: Colors.lightGreen[100],
        elevation: 5.0,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      color: Color.fromRGBO(41, 47, 54, 1),
                    ),
                    hintText: "Search",
                    hintStyle: TextStyle(color: Colors.black38),
                    border: InputBorder.none,
                  ),
                  style: TextStyle(
                    color: Color.fromRGBO(41, 47, 54, 1),
                  ),
                  cursorColor: Color.fromRGBO(41, 47, 54, 1),
                  textInputAction: TextInputAction.search,
                  autocorrect: false,
                ),
              ),
              Icon(
                Icons.menu,
                color: Color.fromRGBO(41, 47, 54, 1),
              ),
            ],
          ),
        ),
      ),
    );

Answer 1

The flexible space is for the widget that expands or contracts with the scroll of the items in the list outside of the sliver app bar. If you want to use the search bar as fixed widget on the top, you should use search widget in your sliver app bar instead like below.

 SliverAppBar(
            automaticallyImplyLeading: false,
            pinned: true,
            floating: true,
            title: _searchCard(),
            titleSpacing: 0,
            backgroundColor: Colors.white,
            elevation: 1.0,
          )