Slivers in Flutter - Part (4)

Slivers in Flutter - Part (4)

SliverOpacity, SliverAnimatedOpacity, SliverFadeTransition, SliverVisibility, SliverIgnorePointer, SliverSafeArea.

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
  • This is Part - 4 of Slivers in Flutter series. Make sure you check the first 3 parts.
  • In this article, I'm going to explain some of the useful Sliver widgets, which are - SliverOpacity, SliverAnimatedOpacity, SliverFadeTransition, SliverVisibility, SliverIgnorePointer, SliverSafeArea.

SliverOpacity

  • The SliverOpacity makes sliver widget transparent.
  • This works the same as the Opacity widget works for Box widgets. The difference is this only works on the Sliver widgets.
  • It usually takes values between 0.0 to 1.0.
  • For the value 0.0, the sliver child is simply not painted at all. For the value 1.0, the sliver child is painted immediately.
  • For values of opacity other than 0.0 and 1.0, this class is relatively expensive because it requires painting the sliver child into an intermediate buffer.
  • Example :
  • Output
  • sliveropacity.gif

SliverAnimatedOpacity

  • If you see in the output of the above example, The opacity is directly jumping from no visibility to full visiblity. It's not looking smooth.
  • To do the smooth transition between 0.0 to 1.0 values we have to use SliverAnimatedOpacity.
  • SliverAnimatedOpacity is an animated version of SliverOpacity which automatically transitions the sliver child's opacity over a given duration whenever the given opacity changes.
  • ExampleOutput
  • sliveranimatedopacity.gif

SliverFadeTransition


SliverVisibility

  • SliverVisibility is the same as the Visibility widget except it takes sliver as a child.
  • It is used to show or hide a sliver child. When the sliver is not visible the replacementSliver is included instead.
  • replacementSliver is used when the sliver child is not visible, assuming that none of the maintain flags (in particular, maintainState) are set.
  • SliverVisibility has different parameters like :
  • maintainAnimation : It is used to determine whether to maintain animations within the sliver subtree when it is not visible.
  • maintainInteractivity: It is used to determine whether to allow the sliver to be interactive when hidden.
  • maintainSemantics: It is used to determine whether to maintain the semantics for the sliver when it is hidden (e.g. for accessibility).
  • maintainSize: It is used to determine whether to maintain space for where the sliver would have been.
  • maintainState: It is used to determine whether to maintain the State objects of the sliver subtree when it is not visible.
  • replacementSliver: Widget defined here is visible when sliver is not visible.
  • Example:Output:
  • slivervisibility.gif

SliverIgnorePointer

  • When you want your sliver to ignore the tapping or any kind of interaction then simply wrap your sliver widget inside SliverIgnorePointer.
  • It will disable the interaction of that widget.
  • When ignoring property is true, the widget is not interactable. And when ignoringSemantics property is true, the subtree will be invisible to the semantics layer
  • Example:Output:
  • sliverignorepointer.gif

SliverSafeArea

  • If you've used SafeArea then, SliverSafeArea is also doing the same thing except it takes sliver as a child instead of Box widget.
  • For example, this will indent the sliver by enough to avoid the status bar at the top of the screen.
  • It will also indent the sliver by the amount necessary to avoid The Notch on the iPhone X or other similar creative physical features of the display.Output:
  • sliversafeareafinal.gif

Wrapping Up

  • This is the 4th part of the Slivers In Flutter series. Check previous articles for more information about Slivers.
  • If you liked this article make sure to give a thumbs up πŸ‘. Also share it with others if you found this helpfulπŸ’™.
  • See you in the next article. Until then..
  • PeaceOutImOutGIF.gif
Β 
Share this