0

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.)',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

1 Answer 1

1

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();
                  }));
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}
1
  • This helped me so much! I don't know why this is as hidden as it is 🙈 Mar 23 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.