Offstage Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
OffStage Widget - Flutter Widget Guide By Flutter Agency
OffStage Widget - Flutter Widget Guide By Flutter Agency

What is Offstage Widget in Flutter?

Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit-testing, and without taking any room in the parent.

The Default constructor of the Offstage Widget will look like below:

OffStageWidget({
  Key key,
  bool offstage: true,
  Widget child,
});

Properties :

  • key: The widget key, used to control if it should be replaced.
  • offstage: Whether the child is hidden from the rest of the tree. It has a boolean data type that will accept only boolean values like true or false.

If true, the child is laid out as if it was in the tree, but without painting anything, without making the child available for hit-testing, and without taking any room in the parent. If false, the child is included in the tree as normal.

Offstage children are still active they can receive focus and have keyboard input directed to them.

Animations continue to run in offstage children, and therefore use battery and CPU time, regardless of whether the animations end up being visible.

  • child: Child Property represents a widget under the current widget in a tree. Child widgets have only one child. To the user, multiple children users can make use of Column Widget, Row Widget, Stack Widget and provide children to that widget.

How to use Offstage Widget in Flutter?

The following code snippet tells us how to implement Offstage Widget in Flutter.

We will hide and show widget using OffStageWidget. Default we have set visibility to false. create a _changeVisibility like below :

bool _visibility = false;
void _changeVisibility(bool visibility) {
  setState(() {
    _visibility = visibility;
  });
}

Now use an Offstage Widget like below:

Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new Container(
          child: Offstage(
            child: new FlutterLogo(size: 200.0),
            offstage: _visibility,
          ),
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.only(top: 16.0),
              child: new Column(
                children: <Widget>[
                  new FlatButton(
                    onPressed: () {
                      _changeVisibility(false);
                    },
                    child: Text("Visible"),
                  ),
                ],
              ),
            ),
            new Container(
              margin: new EdgeInsets.only(top: 16.0),
              child: new Column(
                children: <Widget>[
                  new FlatButton(
                    onPressed: () {
                      _changeVisibility(true);
                    },
                    child: Text("Hide"),
                  ),
                ],
              ),
            ),
          ],
        )
      ],
    );

We will get output like below :

OffStage Widget - Flutter Widget Guide By Flutter Agency

OffStage Widget

Conclusion:

In this article, we have been through What is Offstage Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!

Do let us know your suggestion/feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

 

Leave a Reply