Slivers in Flutter - Part (4)
SliverOpacity, SliverAnimatedOpacity, SliverFadeTransition, SliverVisibility, SliverIgnorePointer, SliverSafeArea.
Play 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
Sliverwidgets, which are - SliverOpacity, SliverAnimatedOpacity, SliverFadeTransition, SliverVisibility, SliverIgnorePointer, SliverSafeArea.
- This works the same as the
Opacitywidget works for
Boxwidgets. The difference is this only works on the
- It usually takes values between
- 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
1.0, this class is relatively expensive because it requires painting the sliver child into an intermediate buffer.
- Example :
- If you see in the output of the above example, The opacity is directly jumping from
full visiblity. It's not looking smooth.
- To do the smooth transition between
1.0values we have to use
SliverAnimatedOpacityis an animated version of
SliverOpacitywhich automatically transitions the sliver child's opacity over a given
durationwhenever the given opacity changes.
- Example Output
- This also animates the
sliverwidget. The only difference is it takes
Animation<double>value instead of
- Example Output :
- Here I've used
Curves.fastOutSlowInanimation. You can use any one of the curves defined in the below class:
SliverVisibilityis the same as the
Visibilitywidget except it takes
sliveras a child.
- It is used to show or hide a sliver child. When the
sliveris not visible the
replacementSliveris included instead.
replacementSliveris used when the
sliverchild is not visible, assuming that none of the
maintainflags (in particular,
maintainState) are set.
SliverVisibilityhas different parameters like :
- maintainAnimation : It is used to determine whether to maintain
animationswithin 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:
- When you want your sliver to ignore the tapping or any kind of interaction then simply wrap your
- It will disable the interaction of that widget.
true, the widget is not interactable. And when
ignoringSemanticsproperty is true, the subtree will be invisible to the semantics layer
- Example: Output:
- If you've used
SliverSafeAreais also doing the same thing except it takes
sliveras a child instead of
- 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:
- This is the 4th part of the
Slivers In Flutterseries. 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..