Preface:

This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge. To prepare for the August challenge of the nuggets, I’m going to pick 31 components this month that haven’t been introduced before and do a full analysis and attribute introduction. These articles will be used as important material in the collection of the Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

This series Component articles The list of
1.NotificationListener 2.Dismissible 3.Switch
4.Scrollbar 5.ClipPath 6.CupertinoActivityIndicator
7.Opacity 8.FadeTransition 9. AnimatedOpacity
10. FadeInImage 11. Offstage 12. TickerMode
13. Visibility[this article]

I. Get to know the Visibility component

The Offstage component, described earlier, can control the Visibility of a child, and is often compared to the Visibility component. The Offstage source contains a description of Visibility: it hides components more efficiently (though not subtly).

Now consider: Opacity, Offstage, and Visibility all control the display/hide of components. What are the differences and connections between them? In this article, I’ll reveal the answer to you from the Visibility source code.

1.Visibility basic information

Below is the definition and constructor of the Visibility component class, which you can see inherits from the StatelessWidget. The instantiation must pass in the and child components, plus a bunch of optional bool properties and a replacement component.

2. Simple use of Visibility

The following is the default effect of the Visibility component. The icon in the middle is the component to be hidden. Click the button to switch the existing state. You can see that when you use Visibility directly, the component will not occupy space when it is hidden.

class OffstageDemo extends StatefulWidget {
  @override
  _OffstageDemoState createState() => _OffstageDemoState();
}

class _OffstageDemoState extends State<OffstageDemo> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          child: const Text('Switch between explicit and implicit'),
          onPressed: _toggleVisible,
        ),
        Visibility(
          visible: _visible,
          child: buildChild(),
        ),
        Text('Default'),]); }void_toggleVisible() { setState(() { _visible = ! _visible; }); } Widget buildChild() =>const Padding(
        padding: const EdgeInsets.all(10),
        child: Icon(
          Icons.camera_outlined,
          color: Colors.green,
          size: 50,),); }Copy the code
3. Placeholder component of Visibility

There is an optional property in Visibility that is replacement, of type Widget, for placeholder.

this.replacement = const SizedBox.shrink(),

final Widget replacement;
Copy the code

The default replacement is sizedbox.shrink (), which is a SizedBox with a width and height of 0.

We can view the details of the tree through the Flutter Inspector and can see when it is hidden. The render tree does have a render object node that passes through the SizedBox object and has a width and height of 0.

Below is the effect of setting replacement. You can see that when hidden, the components corresponding to replacement are displayed.

Visibility(
  visible: _visible,
  child: buildChild(),
  replacement: buildPlaceholder(),
),

Widget buildPlaceholder() => Container(
      width: 50,
      height: 50,
      padding: const EdgeInsets.all(10),
      child: Placeholder(),
    );
Copy the code
4. Five maintainXXX

This leaves the five maintainXXX Boolean properties.

Let’s first look at assertion handling in a construct:

First look at maintainSize, which means whether to maintainSize while hiding. The default is false. From assertion 2 we can see that:

MaintainSize: true: maintainAnimation: true; otherwise, assertion fails.Copy the code

From assertion 1 we can see that:

MaintainAnimation: true: maintainState: true; otherwise, assertion fails.Copy the code

That is, if you want to maintain size, you must maintainAnimation and maintainState. MaintainSize: this is the maintainSize effect, so that the full size area does not disappear when hidden.

Visibility(
  visible: _visible,
  child: buildChild(),
  maintainSize: true,
  maintainAnimation: true,
  maintainState: true,),Copy the code

Looking at the structure, there is an Opacity of 0 on the Opacity component, which should make you smile.

MaintainInteractivity is also simple. It controls whether an event is responded while hidden.

MaintainAnimation and maintainState are used in the source code.

Two, Visibility source implementation

1. Keep the size and click event

The Visibility component, as a StatelessWidget, decides that it does not have any “core technology” by itself, and just uses a combination of other components in the build method. MaintainSize: if maintainSize is true, the Opacity is controlled by visible. MaintainInteractivity is false. MaintainInteractivity is wrapped using the IgnorePointer component, ignoring click events.

2. Hold state and animation

MaintainState: If maintainState is true, the package is wrapped through the Offstage component. If maintainState is true, the package is displayed according to the visible control. For the introduction of the Offstage component, see this article. If maintainAnimation is false, the package is wrapped through the TickerMode component, disabling child component animation when hidden. TickerMode component introduction, see this article

3. WhyVisibilityIs it efficient?

If five maintainXXX is the default, the Visibility component decides to return the component directly through the visible property, and does not need to use the Opacity or Offstage component to complete the Opacity function. MaintainState and maintainAnimation must be true at the same time. This ensures that the user does not use Offstage to disable animation by forgetting the child component.

As you can see here, the Visibility component is a collection of explicit and implicit functions. It can control four properties: whether to accept events, whether to hold size, whether to hold state, and whether to stop animation, which are implemented by IgnorePointer, Opacity, Offstage, and TickerMode respectively. Is a simple upper layer package, the purpose is to facilitate user use, as few errors as possible. So if you want to implicit components, and do not know what to use, Visibility can be brainless turn over.

The use of Visibility is introduced here, the end of this article, thank you for watching, see you tomorrow ~