sliver tools
a set of useful sliver tools that are missing from the flutter framework.
here is a taste what you can make using this package
the structure of this app:
class section extends state {
@override
widget build(buildcontext context) {
return multisliver(
pushpinnedchildren: true,
children: <widget>[
sliverpersistentheader(
pinned: true,
...
),
if (!infinite)
sliveranimatedpaintextent(
child: sliverlist(...),
)
else
sliverlist(...),
],
);
}
}
class newspage extends statelesswidget {
@override
widget build(buildcontext context) {
return customscrollview(
slivers: <widget>[
section(infinite: false),
section(infinite: true),
],
);
}
}
[multi sliver tools
the [multisliver] widget allows for grouping of multiple slivers together such that they can be returned as a single widget.
for instance when one wants to wrap a few slivers with some padding or an inherited widget.
example
class widgetthatreturnsasliver extends statelesswidget {
@override
widget build(buildcontext context) {
return multisliver(
pushpinnedchildren: false, // defaults to false
children: <widget>[
sliverpersistentheader(...),
sliverlist(...),
],
);
}
}
the pushpinnedchildren
parameter allows for achieving a ‘sticky header’ effect by simply using pinned sliverpersistentheader
widgets (or any custom sliver that paints beyond its layoutextent).
sliverstack
the [sliverstack] widget allows for stacking of both slivers and box widgets.
this can be useful for adding some decoration to a sliver.
which is what some of the other widgets in this package use to get their desired effects.
example about sliver tools
class widgetthatreturnsasliver extends statelesswidget {
@override
widget build(buildcontext context) {
return sliverstack(
insetonoverlap: false, // defaults to false
children: <widget>[
sliverpositioned.fill(
child: container(
decoration: boxdecoration(
color: colors.white,
boxshadow: const <boxshadow>[
boxshadow(
offset: offset(0, 4),
blurradius: 8,
color: colors.black26,
)
],
borderradius: borderradius.circular(8),
),
),
)
sliverlist(...),
],
);
}
}
the insetonoverlap
handles whether the positioned children should be inset (made smaller) when the sliver has overlap from a previous sliver.
[sliverclip]
the [sliverclip] widget will add a clip around its child from the child’s paintorigin to its paintextent.
this is very useful and most likely what you want when using a pinned sliverpersistentheader as child of the stack.
example
class widgetthatreturnsasliver extends statelesswidget {
@override
widget build(buildcontext context) {
return sliverclip(
clipoverlap: true, // defaults to true
child: sliverlist(...),
);
}
}
the clipoverlap
parameter allows for configuring whether any overlap with the previous child should be clipped.
this can be useful when one has a sliverpersitentheader above a sliverlist and does not want to give the header an opaque background but also prevent the list from drawing underneath the header.
[sliveranimatedpaintextent]
the [sliveranimatedpaintextent] widget allows for having a smooth transition when a sliver changes the space it will occupy inside the viewport.
for instance when using a sliverlist with a button below it that loads the next few items.
example
class widgetthatreturnsasliver extends statelesswidget {
@override
widget build(buildcontext context) {
return sliveranimatedpaintextent(
duration: const duration(milliseconds: 150),
child: sliverlist(...),
);
}
}
[sliveranimatedswitcher]
the [sliveranimatedswitcher] widget is simply a pre-configured animatedswitcher
widget.
if one needs more options than supplied by this widget a regular animatedswitcher
can be used by giving it the defaultlayoutbuilder
and defaulttransitionbuilder
of [sliveranimatedswitcher].
[slivercrossaxisconstrained]
the [slivercrossaxisconstrained] widget one of the amazing silver tools allows for limiting the cross axis extent of a sliver to a maximum value given by the maxcrossaxisextent
.
for instance a long list of text items on an ipad would be too wide to read so one can wrap the sliverlist in a [slivercrossaxisconstrained] and limit its width to something more reasonable.
example
class widgetthatreturnsasliver extends statelesswidget {
@override
widget build(buildcontext context) {
return slivercrossaxisconstrained(
maxcrossaxisextent: 700,
child: sliverlist(...),
);
}
}
[slivercrossaxispadded]
the [slivercrossaxispadded] widget is one of the silver tools allows for adding padding to the cross axis of a sliver.
this can be done either by passing a paddingstart
and/or paddingend
or by using the symmetric
constructor which takes a single padding value.
when using paddingstart
and paddingend
in a vertical sliver it will depend on the textdirection
whether start is left or right.
example
class widgetthatreturnsasliver extends statelesswidget {
@override
widget build(buildcontext context) {
return slivercrossaxispadded(
paddingstart: 24,
paddingend: 48,
textdirection: textdirection.ltr, // optional, defaults to the directionality specified by the context
child: sliverlist(...),
);
}
}
[sliverpinnedheader]
the [sliverpinnedheader] widget is one of the silver tools allows for easily making a pinned header.
it will size itself to the size of the child and when it reaches the leading edge of the viewport stay there instead of scrolling off the screen.