DEV Community

Cover image for Exploring Flutter’s new Sliver API: A Comprehensive Guide
Nandani Sharma for Canopas Software

Posted on

Exploring Flutter’s new Sliver API: A Comprehensive Guide

If you’ve been using Flutter for a long time, you know that until now there is no way to group slivers together and render them as single slivers in customScrollview.

What if we needed to apply different padding to individual groups of slivers? Or What if you wanted to create a vertically scrollable list of slivers side by side, much like using a raw widget?

Well, the release of Flutter 3.13, introduces two different widgets,SliverMainAxisGroup and SliverCrossSxisGroup to group slivers in the main-axis and cross-axis respectively.

There are new features and improvements when it comes to scrolling with this new API and the best part? you can easily create one of your favorite— sticky headers.

Table of contents

  • What is silver?
  • Types:
    1. SliverMainAxisGroup
    2. SliverCrossAxisGroup
  • SliverCrossAxisExpanded
  • SliverConstrainedCrossAxis
  • Implement Demo UI
    1. Create a Basic UI
    2. Add CircleAvatar
    3. Move CircleAvatar
    4. Resize CircleAvatar
  • Conclusion

What is a sliver?

A sliver is a portion of a scrollable area that you can define to behave specially. You can use slivers to achieve custom scrolling effects, such as elastic scrolling.

To put it simply, slivers are like a more detailed way to control how things scroll.

Let's have a look at what we’re going to implement…

Exploring Flutter’s new Sliver API

The new Sliver API in Flutter opens up a world of possibilities for creating dynamic, engaging, and efficient app layouts.

To dive even deeper into this topic and explore practical code examples, make sure to visit on Canopas Blog.

Follow Canopas for our latest technical blog posts!

Top comments (0)