Pull down to show search bar in flutter?

Question

do anyone know how to have the screen to pull down and it would show a search icon button and then a search filter bar on the top?

For example in Spotify, there is a search function for the album, that when you pull the screen down and it show a search filter bar to search for music. (i think).

Answer 1

What you're looking for is RefreshIndicator. Which you insert above your ListView/GridView/scroll.

Answer 2

You can use SilverAppBar inside CustomScrollView to do this. Every time u scroll up in any position, appbar will appear

You can checkout preview for this example i write here

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers:[
          SliverAppBar(
            // pinned: true,
            floating: true,
            snap: true,
            title: Text('Your appbar'),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('List Item $index'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}