Flutter SliverAppBar — Allow scrolling until SliverAppBar is no longer visible

Issue

I am trying to create a CustomScrollView with a SliverAppBar. Since the SliverGrid that contains the main content may frequently have insufficient content to allow scrolling past the ‘SliverAppBar’, the UI now feels ‘stuck’; the user can only scroll until a part of the SliverAppBar but never until it is hidden.

Therefore, I’m looking for away to allow scrolling only until the SliverAppBar is hidden.

Below is my current code,

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.green,
            expandedHeight: 500.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                'tree_logo.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),

          SliverGrid.count(
            crossAxisCount: 4,
            crossAxisSpacing: 20.0,
            mainAxisSpacing: 20.0,
            childAspectRatio: 4 / 3,
            children: [
              PermissibleModuleCard(
                moduleTitle: 'Master Data',
                moduleDescription:
                    'Edit berbagai master-master data (client, supplier, tenaga kerja & material) serta konstanta-kosntanta lainnya (PPN, Alamat, etc.)',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Solution

After looking through the docs, I found the center property for CustomScrollView. This allowed me to set my SliverList as the center widget.

Final code:

class HomePage extends StatelessWidget {
  final GlobalKey _sliverKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        center: _sliverKey,
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Image.asset(
              'tree_logo.jpg',
              fit: BoxFit.cover,
            ),
          ),
          SliverGrid.count(
            key: _sliverKey,
            crossAxisCount: 4,
            crossAxisSpacing: 20.0,
            mainAxisSpacing: 20.0,
            childAspectRatio: 4 / 3,
            children: [
              PermissibleModuleCard(
                moduleTitle: 'Master Data',
                moduleDescription:
                    'Edit berbagai master-master data (client, supplier, tenaga kerja & material) serta konstanta-kosntanta lainnya (PPN, Alamat, etc.)',
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) {
                    return MasterDataModulesHomePage();
                  }));
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answered By – VLXU

Answer Checked By – David Goodson (FlutterFixes Volunteer)