I am trying to use Sliver to implement collapsible list header. As I am changing widgets from normal to Sliver I often end up with error like this:
I/flutter ( 3141): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter ( 3141): The following assertion was thrown building NotificationListener<ScrollNotification>(): I/flutter ( 3141): A RenderViewport expected a child of type RenderSliver but received a child of type I/flutter ( 3141): RenderRepaintBoundary. I/flutter ( 3141): RenderObjects expect specific types of children because they coordinate with their children during I/flutter ( 3141): layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a I/flutter ( 3141): RenderSliver does not understand the RenderBox layout protocol. I/flutter ( 3141): I/flutter ( 3141): The RenderViewport that expected a RenderSliver child was created by: I/flutter ( 3141): Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#307856652] ← Listener ← _GestureSemantics ← I/flutter ( 3141): RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#701223524] ← RepaintBoundary ← I/flutter ( 3141): CustomPaint ← RepaintBoundary ← NotificationListener<ScrollNotification> ← I/flutter ( 3141): GlowingOverscrollIndicator ← Scrollable ← ⋯ I/flutter ( 3141): I/flutter ( 3141): The RenderRepaintBoundary that did not match the expected child type was created by: I/flutter ( 3141): RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← I/flutter ( 3141): Scrollable ← SingleChildScrollView ← Viewport ← _ScrollableScope ← I/flutter ( 3141): IgnorePointer-[GlobalKey#307856652] ← Listener ← _GestureSemantics ← I/flutter ( 3141): RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#701223524] ← RepaintBoundary ← ⋯ I/flutter ( 3141):
My understanding is this is because normal widgets can't be used directly to render in Sliver widgets.
Is there any definite list of Sliver widgets in the framework?
sliver.dart
doesn't show much
In Flutter, a sliver is a slice of a scrollable area you can use to achieve custom scrolling behaviors. When you finish this tutorial, you'll know more about slivers and be comfortable using them.
Sliver is a portion of the scrollable area which is used to achieve a custom scrolling effect. In other words, the sliver widget is a slice of the viewport. We can implement all of the scrollable views, such as ListView, GridView using slivers.
SliverFixedExtentList class Null safety. A sliver that places multiple box children with the same main axis extent in a linear array. SliverFixedExtentList places its children in a linear array along the main axis starting at offset zero and without gaps.
Now lets start implementation of CustomScrollView in Flutter First of all, create a basic project and return a Custom Scroll View widget. Then, add a silver app bar and then add a silver grid. Here we only used two child widgets in the custom scroll view. The Entry point of code.
The docs for RenderSliver
seem to be the closest thing we have to definitive Sliver documentation at the moment.
RenderSliver
is implemented by
RenderSliverHelpers
(mixin)RenderSliverMultiBoxAdaptor
(abstract) RenderSliverFixedExtentBoxAdaptor
(abstract) _RenderSliverPrototypeExtentList
(concrete)RenderSliverFillViewport
(concrete)RenderSliverFixedExtentList
(concrete)RenderSliverGrid
(concrete)RenderSliverList
(concrete)RenderSliverPadding
(concrete)RenderSliverPersistentHeader
(abstract) RenderSliverFloatingPersistentHeader
(concrete) RenderSliverFloatingPinnedPersistentHeader
(concrete)RenderSliverPinnedPersistentHeader
(concrete)RenderSliverScrollingPersistentHeader
(concrete)RenderSliverSingleBoxAdapter
(abstract) RenderSliverFillRemaining
(concrete)RenderSliverToBoxAdapter
(concrete)These RenderSliver
implementations are created by the following widgets:
SliverMultiBoxAdaptorWidget
subclasses:
SliverPrototypeExtentList
SliverFillViewport
SliverFixedExtentList
SliverGrid
SliverList
StatelessWidget
subclasses:
SliverPersistentHeader
SliverAppBar
SingleChildRenderObjectWidget
subclasses:
SliverFillRemaining
SliverPadding
SliverToBoxAdapter
So those are the widgets you can use when you want to produce instances of RenderSliver
.
Of course, it's likely that more and more RenderSliver
-creating widgets will be added over time, and you can also make your own! Hopefully this list will be enough to get you started.
As of 2021, according to their docs, these are some of the sliver widgets:
SliverAnimatedList
A sliver that animates items when they are inserted or removed.
SliverAnimatedOpacity
Animated version of SliverOpacity which automatically transitions the sliver child's opacity over a given duration whenever the given opacity changes.
SliverFadeTransition
Animates the opacity of a sliver widget.
SliverFillRemaining
A sliver that contains a single box child that fills the remaining space in the viewport.
SliverFillViewport
A sliver that contains multiple box children that each fills the viewport.
SliverFixedExtentList
A sliver that places multiple box children with the same main axis extent in a linear array.
SliverGrid
A sliver that places multiple box children in a two dimensional arrangement.
SliverIgnorePointer
A sliver widget that is invisible during hit testing.
SliverLayoutBuilder
Builds a sliver widget tree that can depend on its own SliverConstraints.
SliverList
A sliver that places multiple box children in a linear array along the main axis.
SliverOffstage
A sliver that lays its sliver child out as if it was in the tree, but without painting anything, without making the sliver child available for hit testing, and without taking any room in the parent.
SliverOpacity
A sliver widget that makes its sliver child partially transparent.
SliverOverlapAbsorber
A sliver that wraps another, forcing its layout extent to be treated as overlap.
SliverOverlapAbsorberHandle
Handle to provide to a SliverOverlapAbsorber, a SliverOverlapInjector, and an NestedScrollViewViewport, to shift overlap in a NestedScrollView.
SliverOverlapInjector
A sliver that has a sliver geometry based on the values stored in a SliverOverlapAbsorberHandle.
SliverPadding
A sliver that applies padding on each side of another sliver.
SliverPersistentHeader
A sliver whose size varies when the sliver is scrolled to the edge of the viewport opposite the sliver's GrowthDirection.
SliverPrototypeExtentList
A sliver that places its box children in a linear array and constrains them to have the same extent as a prototype item along the main axis.
SliverReorderableList
A sliver list that allows the user to interactively reorder the list items.
SliverSafeArea
A sliver that insets another sliver by sufficient padding to avoid intrusions by the operating system.
SliverToBoxAdapter
A sliver that contains a single box widget.
SliverVisibility
Whether to show or hide a sliver child.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With