How to pin TextField in SliverAppBar while Scrolling in Flutter?

Question

SliverAppBar contains textfield search box, but it scrolls up when scrolls. How to show the searchbox while scrolling. I did my own works, but didn't work. If there is any resource about Sliverappbar and Slivergrid, It also useful. But now How to pin appbar textfield?

SliverAppBar(
      //snap: true,
      stretch: true,
      //floating: true,
      title: Text('Home'),
      centerTitle: true,
      expandedHeight: 100.0,
      backgroundColor: Colors.red,
      leading: IconButton(
        icon: Icon(
          Icons.menu,
          color: Colors.white,
        ),
        onPressed: () {},
      ),
      actions: [
        IconButton(
          icon: Icon(
            Icons.notifications,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
      ],
      //floating: false,
      pinned: true,
      flexibleSpace: ListView(
        children: [
          SizedBox(
            height: 40.0,
          ),
          Padding(
            padding: const EdgeInsets.only(
              top: 12.0,
              bottom: 12.0,
              left: 8.0,
              right: 8.0,
            ),
            child: Container(
              height: 40,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(5.0)),
              child: TextField(
                decoration: InputDecoration(
                  labelText: "Search products...",
                  border: InputBorder.none,
                  icon: IconButton(onPressed: () {}, icon: Icon(Icons.search)),
                ),
              ),
            ),
          ),
        ],
      ),
    );

Solution

flexibleSpace has been design for this scrolling effect purpose, it will shrink based on scroll. However, you can get your desire UI using title here is the demo

 SliverAppBar(
            //snap: true,
            stretch: true,
            //floating: true,
            toolbarHeight: 100.0 + kToolbarHeight,

            /// based on your desing
            title: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.white,
                      ),
                      onPressed: () {},
                    ),
                    Text('Home'),
                    IconButton(
                      icon: Icon(
                        Icons.notifications,
                        color: Colors.white,
                      ),
                      onPressed: () {},
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 12.0,
                    bottom: 12.0,
                    left: 8.0,
                    right: 8.0,
                  ),
                  child: Container(
                    height: 40,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5.0)),
                    child: TextField(
                      decoration: InputDecoration(
                        labelText: "Search products...",
                        border: InputBorder.none,
                        icon: IconButton(
                            onPressed: () {}, icon: Icon(Icons.search)),
                      ),
                    ),
                  ),
                ),
              ],
            ),

            centerTitle: true,
            // expandedHeight: 100.0,
            backgroundColor: Colors.red,
            // leading: IconButton(
            //   icon: Icon(
            //     Icons.menu,
            //     color: Colors.white,
            //   ),
            //   onPressed: () {},
            // ),
            // actions: [

            // ],
            //floating: false,
            pinned: true,
          ),

Does it solve your question?

Comments

[Yeasin Sheikh]

To get proper UI, I would prefer using Row by replacing leading and actions to have more control over UI.

[Mahi]

Thanks, I will check and replay back.

[Mahi]

It almost did, but appbar title and icons are not aligning at top.

[Mahi]

TextField is working fine. but appbar title is showing top, action icons below that.

[Yeasin Sheikh]

As I mentioned earlier, we need to use replace leading and actions with row, I've updated the answer.

[Mahi]

Oh.that's great.. thanks