Flutter series: offstage in flutter

brief introduction

We are using flutter In the process of , Sometimes it is necessary to control whether certain components are displayed , One way is to remove this component from the render tree Delete in , In this way, this component is equivalent to not appearing , But sometimes , We just don't want to show this widget, But this component still exists , And can accept keyboard input , You can also use CPU. The only difference between it and a real component is that it is invisible .

Such components are called Offstage.  Let's talk about it in detail today Offstage Use .

Offstage Detailed explanation

Let's look at it first Offstage The definition of ：

class Offstage extends SingleChildRenderObjectWidget


You can see ,Offstage Is a single child Of Widget. Next, let's look at its constructor ：

 const Offstage({ Key? key, this.offstage = true, Widget? child })
 : assert(offstage != null),
 super(key: key, child: child);


Offstage It mainly contains two properties , Respectively means whether it is offstage State of bool value offstage, If offstage=true, that Offstage The son of child Will be hidden . At this time child It won't take up any space .

The remaining attribute is child 了 .

that Offstage How to control child whether offstage What about ？

Let's see what it looks like createRenderObject Method ：

 RenderOffstage createRenderObject(BuildContext context) => RenderOffstage(offstage: offstage);


You can see that the returned one RenderOffstage object , One of them accepts offstage Parameters .

If you go deep into RenderOffstage Words , You can see him paint Here's how it works ：

 void paint(PaintingContext context, Offset offset) {
 if (offstage)
 return;
 super.paint(context, offset);
 }


If offstage yes true Words ,paint Method directly returns , No drawing will be done . This is the same. Offstage The secret of .

Offstage Use

From the above Offstage We know that ,Offstage Need one bool Of offstage attribute . So this offstage Attributes can be transformed , triggering offstage Different states of .

because offstage Need such a state , So we're using offstage When , Generally speaking, it is to create a StatefulWidget, Thus in StatefulWidget Keep such a offstage attribute .

Let's create a OffstageApp, This is a StatefulWidget, In its createState In the method , Return to one

State<OffstageApp>

object , stay createState In the method , Let's define a _offstage attribute .

By using this _offstage, We can create Offstage as follows ：

Offstage(
 offstage: _offstage,
 child: SizedBox(
 key: _key,
 width: 150.0,
 height: 150.0,
 child: Container(
 color: Colors.red,
 ),
 ),
 )


Here we set Offstage Of offstage For the just set _offstage.

In addition, for the convenience of display , We will Offstage Of child Set to a SizedBox, It contains a red Container.

SizedBox Contains width and height attribute , To facilitate our subsequent testing .

By default , because _offstage=true, So this Offstage It's invisible , So how to make it visible ？

We offer a ElevatedButton, In its onPressed In the method , We call setState Method to modify _offstage, As shown below ：

ElevatedButton(
 child: const Text(' Switch offstage'),
 onPressed: () {
 setState(() {
 _offstage = !_offstage;
 });
 },
 ),


in addition , We need one more ElevatedButton To detect Offstage Size , Look at the _offstage When it changes ,Offstage Will it change .

 ElevatedButton(
 child: const Text(' testing SizedBox size '),
 onPressed: () {
 ScaffoldMessenger.of(context).showSnackBar(
 SnackBar(
 content:
 Text('SizedBox is ${_getSizedBoxSize()}'),
 ),
 );
 })


there _getSizedBoxSize The implementation is as follows ：

 Size _getSizedBoxSize() {
 final RenderBox renderBox =
 _key.currentContext!.findRenderObject()! as RenderBox;
 return renderBox.size;
 }


We go through Offstage Of _key, To get its Context, To find the corresponding RenderBox, Get its size .

Okay , So our code is written , The final will be OffstageApp Put it in Scaffold Run in , We can get the following interface ：

Default Offstage Will not show .

If we click on the detection below SizeBox Size buttons , You can get the following interface ：

You can see that although Offstage No show , But I still got its size .

Then we click switch Offstage Button , You can get the following interface ：

The interface perfectly shows .

summary

Offstage Is a very convenient component , It can be used to hide components that we don't need to show , But you can still get its size .

Examples of this article ：

https://github.com/ddean2009/learn-flutter.git