Collapsable AppBar with Search in fliutter

Question

I want to achieve something like this using a SliverAppBar with a TextField inside for my search. When users scroll up, the TextField should scroll up pinning itself to the appBar. However, I have been unable to achieve this.

This is my code:

return CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  stretch: false,
                  expandedHeight: 200.0,
                  floating: false, //This is not needed since it's default
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                    title: Container(
                      height: 50,
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Search",
                          fillColor: Colors.white,
                          filled: true,
                          suffixIcon: Icon(Icons.filter_list),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20.0),
                            borderSide: BorderSide(color: Colors.transparent),

                          ),
                          contentPadding:
                          EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0)
                        ),
                      ),
                    )
                  ),
                ),
                SliverFillRemaining(
                  child: new Center(
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Text(
                          'You have pushed the button this many times:',
                        ),
                        new Text(
                          '',
                          style: Theme
                              .of(context)
                              .textTheme
                              .display1,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            );

My search is stretched beyond bounds when appBar is expanded and doesn't work well while scrolling up. What do I do?

score 0 · Answer 1 · answered Apr 13 '20 at 14:28

You can use FlexibleSpaceBar property of SilverAppBar. Code snippet below :

SliverAppBar(
     pinned: true,
     leading: IconButton(icon: Icon(Icons.menu), onPressed: () {},),
     expandedHeight: kExpandedHeight,
     title: _showTitle ? Text('_SliverAppBar') : null,
        flexibleSpace: _showTitle ? null : FlexibleSpaceBar(
           title: new Column(
           mainAxisAlignment: MainAxisAlignment.end,
           children: <Widget>[
               Text('_SliverAppBar'),
               TextField(
                    controller: _filter,
                    decoration: new InputDecoration(
                      prefixIcon: new Icon(Icons.search),
                      hintText: 'Search...'
                    ),
                  ),
                ],
              ),
              background: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Info'),
                ],
              ),
            ),
          )

It produces following result.

Normal :

Scrolled-up :

why does the textField stretch beyond the widths? Is there a way I can fit it into the app bar while expanded? — bensofter, Apr 13 '20 at 16:16
I am puzzled on the stretch as well. I will check tomorrow and let you know if I find something. — Sukhi, Apr 13 '20 at 17:03

Collapsable AppBar with Search in fliutter

1 Answers1