Slivers in Flutter

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 :
https://gist.github.com/red-star25/5f6abc853c457ca6f1593d1d597c36d8
Output

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.
Example
https://gist.github.com/red-star25/7f3f61a4964155b33c5b347b90458639
Output

This also animates the opacity of the sliver widget. The only difference is it takes Animation<double> value instead of double values.
Example
https://gist.github.com/red-star25/d9b9c4dd269075872fde30d3410da965
Output :
Here I've used Curves.fastOutSlowIn animation. You can use any one of the curves defined in the below class:
https://api.flutter.dev/flutter/animation/Curves-class.html

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:
https://gist.github.com/red-star25/7219bf7c97da7957f4642bd3f7d9e334
Output:

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:
https://gist.github.com/red-star25/182a2aba682c2760f5146c403430f67c
Output:

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.
https://gist.github.com/red-star25/7351745653b8d15d220360fec4337c84
Output:

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..