Sticky Filters Bar Flutter

Question

I'm completely new to flutter, doing a small project to get the hang of it. I'm trying to figure out how to implement a sticky filters section for a list, hence my initial instinct was to just place it in the actual AppBar. What I am trying to do is very similar to this:
example filters

I already discovered FilterChips so I guess those will be my actual clickable filters. What I am struggling to figure out is:
a) How do I place a list of FilterChips in the AppBar? Can I even do that?
b) Say a) isn't possible, then how do I make a sticky component? I found sliver components but I'm not sure those are what I a looking for. Or is it?
c) Is the way to achieve this completely different from what I'm trying to do?

If anyone can provide any insight into even what I need to google, it would be greatly appreciated. As I said, I've only been learning flutter for 2 days so far, so.. :)

Answer 1

If you're trying to get a fixed top section, and then, a scrollable one, you could simply use a Column() into your Scaffold, and wrap a Container() followed by an Expanded() into it.

For example :

Widget build(BuildContext context) {
return Scaffold(
    appBar:
        AppBar(title: Text(widget.title), backgroundColor: Colors.green),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container( // will be fixed top
              child: Column(children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Search...',
                suffixIcon: Icon(Icons.search),
              ),
            ),
            Wrap(
              spacing: 5.0,
              children: List<Widget>.generate(
                3,
                (int index) {
                  return ChoiceChip(
                    label: Text('Item $index'),
                    selected: false,
                    onSelected: (bool selected) {
                      /*setState(() {
                    _value = selected ? index : null;
                  });*/
                    },
                  );
                },
              ).toList(),
            ),
          ])),
          Expanded( // will be scrollable
              child: ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemCount: 15,
                  itemBuilder: (BuildContext context, int ind) {
                    return Container(
                      margin: const EdgeInsets.all(5),
                      height: 450,
                      decoration: BoxDecoration(
                        color: Colors.pink[600],
                        borderRadius: BorderRadius.circular(10),
                      ),
                    );
                  }))
        ],
      ),
    ));

}