Fully Scrollable Screen in Flutter

Question

I implemented a basic product page with staggered GridView. Now, the issue is that when i scroll through the items only the GridView shows changes in items displayed i.e Only IT gets scrolled while the other elements of screen (the top bar) remains static. Please see the below link for my current output:

Current Output video

Expected output is that the entire screen (minus the bottom bar) gets scrolled. I tried using the SingleChildScrollView having a container which has the entire page, but could not get results. Here is my Code, my objective is that if i scroll, the top bar should also scroll upwards and eventually disappear:

class Items extends StatefulWidget {
  const Items({Key? key}) : super(key: key);

  @override
  _ItemsState createState() => _ItemsState();
}

class _ItemsState extends State<Items> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: double.infinity,
            width: double.infinity,
            child: Column(
              children: [
                SizedBox(height: 60),
                   //TopBar Code skipped, GridView starts here
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Container(
                    height: 600,
                    child: GridView.custom(
                      gridDelegate: SliverQuiltedGridDelegate(
                        crossAxisCount: 4,
                        mainAxisSpacing: 16,
                        crossAxisSpacing: 16,
                        repeatPattern: QuiltedGridRepeatPattern.inverted,
                        pattern: [
                          QuiltedGridTile(2, 2),
                          QuiltedGridTile(1, 2),
                          QuiltedGridTile(1, 2),
                        ],
                      ),
                      childrenDelegate: SliverChildBuilderDelegate(
                          (context, index) => ItemCard(),
                          childCount: 12),
                    ),
                  ),
                )
              ],
            ),
          ), // Bottom bar starts here

          Padding(
            padding: const EdgeInsets.fromLTRB(19, 10, 19, 38),
            child: Row(
              children: [
                Expanded(
                  child: Align(
                    alignment: Alignment.bottomLeft,
                    child: IconButton(
                        icon: Icon(
                          Icons.search_rounded,
                        ),
                        onPressed: () {}),
                  ),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: IconButton(
                    icon: Icon(Icons.qr_code_scanner_rounded),
                    onPressed: () {},
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

You have to change your AppBar to SliverAppBar. It has the ability to disappear when the grid is scrolled. Check out the unpinned version of Sliver App Bar here.