1

I am trying to build a custom scroll view which contains a sliver app bar to achieve something similar to what's shown here:

https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

However I want to have the word Search and below it I want 3 IconButtons Evenly spaced, when the page (CustomScrollView) is scrolled, I want the 3 IconButtons to be pinned to the top of the SliverAppBar and the Search Text to disappear...

I Tried to achieve the above via the following code:

 class SearchPage extends StatelessWidget {

      const SearchPage();

      @override
      Widget build(BuildContext context) {
        return CustomScrollView(slivers: <Widget>[
        const SliverAppBar(
        pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: _buildSliverAppBarFlex(),
            );
      }


       Widget _buildSliverAppBarFlex() {
        return Container(
            child: Column(
              children: <Widget>[
                Text("Search", style: TextStyle(fontSize: 24.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold)),
                Row(children: <Widget>[
                  IconButton(icon: Icon(Icons.flight)),
                  IconButton(icon: Icon(Icons.hotel)),
                  IconButton(icon: Icon(Icons.drive_eta))
                ])
              ],
            )
        );
      }
    }

However I get a warning that flexibleSpace must take a const constructor widget and that the _buildSilverAppBarFlex Widget I've made is not - I cannot add const or final to it either... Any ideas how I can achieve what I want?

CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
RamanSB
  • 1,162
  • 9
  • 26

1 Answers1

5

The warning comes because you are using const ahead of your SliverAppBar, remove this, and warning will be gone.

So, instead of this

const SliverAppBar(...)

Use this. 

SliverAppBar(...)

If you want to use const there, make sure your FlexibleSpaceBar is also a const then.

CopsOnRoad
  • 237,138
  • 77
  • 654
  • 440
  • I don't know if it worked, because I used a completely different approach - but I'll approve - I also have another question: Suppose I have a SliverAppBar and a SliverList which has a SliverChildListDelegate, how would I go about sticking/pinning the first child in the SliverList to the top of the screen as the SliverAppBar scrolls out/collapses (off the screen)? – RamanSB May 30 '19 at 16:59