A set of useful sliver tools that are missing from the flutter framework

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.