Flutter tips: mediaquery and build optimization secrets you don't know

The purpose of today's article is to complement your understanding of MediaQuery And the corresponding rebuild Basic cognition of mechanism , I believe this article will help you optimize performance and debugging bug It will help .

Flutter Everyone should be inseparable from MediaQuery , Such as through MediaQuery.of(context).size Get screen size , Or by MediaQuery.of(context).padding.top Get the status bar height , Use it casually MediaQuery.of(context) Is there any problem ？

First of all, we need to explain briefly , adopt MediaQuery.of Acquired MediaQueryData There are several very similar parameters in ：

• viewInsets ： The size of the part completely obscured by the system user interface , Simply put, it is the keyboard height
• padding ： Simply put, it's the status bar and the bottom security area , however bottom Will become... Because the keyboard pops up 0
• viewPadding ： and padding equally , however bottom Part will not change

for instance , stay iOS On , As shown in the figure below , When the keyboard is ejected or not , You can see MediaQueryData Changes in some parameters in ：

• viewInsets When the keyboard does not pop up 0, After the keyboard pops up bottom become 336
• padding Before and after the keyboard pops up , bottom from 34 Turned into 0
• viewPadding There is no change in the data before and after the keyboard pops up

You can see MediaQueryData The data in the keyboard will change according to the keyboard state , Again because MediaQuery It's a InheritedWidget , So we can pass MediaQuery.of(context) Get the top-level shared MediaQueryData .

So here comes the question ,InheritedWidget The update logic of , It is through registration context To bind , That is to say MediaQuery.of(context) Itself is a binding behavior , then MediaQueryData And it has something to do with the keyboard state , therefore ： Ejecting the keyboard may cause the use of MediaQuery.of(context) Where to trigger rebuild, for instance ：

As shown in the following code , We are MyHomePage Used in MediaQuery.of(context).size And print out , And then jump to EditPage page , Pop up keyboard , What happens at this time ？

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("######### MyHomePage ${MediaQuery.of(context).size}");
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: InkWell(
          onTap: () {
            Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
              return EditPage();
            }));
          },
          child: new Text(
            "Click",
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}

class EditPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("ControllerDemoPage"),
      ),
      extendBody: true,
      body: Column(
        children: [
          new Spacer(),
          new Container(
            margin: EdgeInsets.all(10),
            child: new Center(
              child: new TextField(),
            ),
          ),
          new Spacer(),
        ],
      ),
    );
  }
}

Here's the picture log Shown , You can see the process of playing up on the keyboard , because bottom Change , therefore MediaQueryData It has changed , Thus leading to a higher level of MyHomePage Although not visible , But in the process of playing the keyboard, it is constantly build .

Just imagine , If you use at the beginning of each page MediaQuery.of(context) , Then it opens 5 A page , At this time you are in the 5 When a page pops up , Also triggered the front 4 A page rebuild, Naturally, there may be a Caton .

So if I'm not MyHomePage Of build Method directly use MediaQuery.of(context) , That's in EditPage If the keyboard pops up in the, it will not lead to a higher level MyHomePage Trigger build ？

The answer is yes , period MediaQuery.of(context).size after , MyHomePage Not because of EditPage The keyboard pops up in the rebuild.

So trick One ： Be careful Scaffold Use outside MediaQuery.of(context) , You may now wonder what it is Scaffold outside , It's OK. I'll explain later .

Then someone here may have to say ： We go through MediaQuery.of(context) Acquired MediaQueryData , No, it corresponds to MaterialApp Inside MediaQuery Do you ？ Then it changes , Should not all trigger the following child all rebuild Do you ？

This actually has something to do with page routing , That's what we often say PageRoute The implementation of the .

As shown in the figure below , Because of the nested structure , In fact, popping up the keyboard does lead to MaterialApp Under the child All trigger rebuild , Because the design MediaQuery Is in the Navigator above , So the pop-up keyboard will trigger Navigator Of rebuild.

Under normal circumstances Navigator All trigger rebuild 了 , Why don't all pages be rebuild Well ？

This is similar to the base class of the routing object ModalRoute It matters , Because inside it will pass a _modalScopeCache Parameter put Widget cached , As the note says ：

The cache area does not change with the frame , To get a minimal build .

for instance , As shown in the following code ：

• So we define one TextGlobal , stay build Output in method "######## TextGlobal"
• And then in MyHomePage Define a global TextGlobal globalText = TextGlobal();
• And then MyHomePage Add in 3 individual globalText
• Finally, click FloatingActionButton Trigger setState(() {});

class TextGlobal extends StatelessWidget {
  const TextGlobal({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("######## TextGlobal");
    return Container(
      child: new Text(
        " test ",
        style: new TextStyle(fontSize: 40, color: Colors.redAccent),
        textAlign: TextAlign.center,
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String? title;
  MyHomePage({Key? key, this.title}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextGlobal globalText = TextGlobal();
  @override
  Widget build(BuildContext context) {
    print("######## MyHomePage");
    return Scaffold(
      appBar: AppBar(),
      body: new Container(
        alignment: Alignment.center,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            globalText,
            globalText,
            globalText,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {});
        },
      ),
    );
  }
}

So interesting came , Here's the picture log Shown ,"######## TextGlobal" In addition to having output at the beginning of the build , be left over setState(() {}); It is not triggered at the time of , No rebuild , This is actually the top ModalRoute Similar behavior ： Ejecting the keyboard causes MediaQuery Trigger Navigator perform rebuild, however rebuild here we are ModalRoute It doesn't affect .

In fact, this behavior is also reflected in Scaffold in , If you go to see Scaffold Source code , You'll find out Scaffold It's used a lot MediaQuery.of(context) .

Like the code above , If you give MyHomePage Of Scaffold To configure a 3333 Of ValueKey , So in EditPage When the keyboard pops up , Actually MyHomePage Of Scaffold Yes, it will trigger rebuild , But because it uses widget.body , So it doesn't lead to body Inner object refactoring .

If it is MyHomePage If rebuild , Would be right. build Method new Object to carry out rebuild; But if it's just MyHomePage Inside Scaffold Internally triggered rebuild , Will not lead to MyHomePage Inside body Parameter corresponding child perform rebuild .

Is it too abstract ？ A simple example , As shown in the following code ：

• We define a LikeScaffold Control , Within the control, you can use widget.body Transfer object
• stay LikeScaffold Internally we use MediaQuery.of(context).viewInsets.bottom , imitation Scaffold Use in MediaQuery
• stay MyHomePage Use in LikeScaffold , And give LikeScaffold Of body To configure a Builder , Output "############ HomePage Builder Text " Used to observe
• Jump to the EditPage Page open keyboard

class LikeScaffold extends StatefulWidget {
  final Widget body;

  const LikeScaffold({Key? key, required this.body}) : super(key: key);

  @override
  State<LikeScaffold> createState() => _LikeScaffoldState();
}

class _LikeScaffoldState extends State<LikeScaffold> {
  @override
  Widget build(BuildContext context) {
    print("####### LikeScaffold build ${MediaQuery.of(context).viewInsets.bottom}");
    return Material(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [widget.body],
      ),
    );
  }
}
····
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var routeLists = routers.keys.toList();
    return new LikeScaffold(
      body: Builder(
        builder: (_) {
          print("############ HomePage Builder Text ");
          return InkWell(
            onTap: () {
              Navigator.of(context).push(CupertinoPageRoute(builder: (context) {
                return EditPage();
              }));
            },
            child: Text(
              "FFFFFFF",
              style: TextStyle(fontSize: 50),
            ),
          );
        },
      ),
    );
  }
}

You can see , In the beginning "####### LikeScaffold build 0.0 and ############ HomePage Builder Text It's all working , Then after the keyboard pops up ,"####### LikeScaffold build Follow the keyboard animation and output continuously bottom Of size , however "############ HomePage Builder Text ") No output , Because it is widget.body example .

So through this minimal example , You can see that although Scaffold Use a lot of MediaQuery.of(context) , But the scope of influence is limited to Scaffold Inside .

Then we will continue to look at the modification of this example , If in LikeScaffold Nested one more Scaffold , What will the output result be ？

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var routeLists = routers.keys.toList();
    /// An extra  Scaffold
    return Scaffold(
      body:  new LikeScaffold(
        body: Builder(
        ·····
        ),
      ),
    );
}

The answer is LikeScaffold Internal "####### LikeScaffold build It will not output because the keyboard pops up , That is to say ： LikeScaffold Although used MediaQuery.of(context) , But it is no longer caused by the bounce of the keyboard rebuild .

Because at this time LikeScaffold yes Scaffold Of child , So in LikeScaffold Pass inside MediaQuery.of(context) Point to the , It's actually Scaffold Internally processed MediaQueryData.

stay Scaffold There are many similar processes inside , for example body According to whether there is Appbar and BottomNavigationBar To decide whether to remove the paddingTop and paddingBottom .

therefore , Did you think of anything here ？ Why pass from time to time MediaQuery.of(context) Acquired padding , yes , we have top by 0 , Some are not for 0 , The reason is what you get context Where are from .

for instance , As shown in the following code , ScaffoldChildPage As Scaffold Of child , We are in MyHomePage and ScaffoldChildPage Internal printing MediaQuery.of(context).padding ：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("MyHomePage         MediaQuery padding: ${MediaQuery.of(context).padding}");
    return Scaffold(
      appBar: AppBar(
        title: new Text(""),
      ),
      extendBody: true,
      body: Column(
        children: [
          new Spacer(),
          ScaffoldChildPage(),
          new Spacer(),
        ],
      ),
    );
  }
}
class ScaffoldChildPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("ScaffoldChildPage  MediaQuery padding: ${MediaQuery.of(context).padding}");
    return Container();
  }
}

As shown in the figure below , You can see , Because at this time MyHomePage Yes Appbar , therefore ScaffoldChildPage Get it from paddingTop yes 0 , Because at this time ScaffoldChildPage Acquired MediaQueryData Has been MyHomePage Inside Scaffold Rewrite the .

If you give MyHomePage Added BottomNavigationBar , You can see ScaffoldChildPage Of bottom From the original 34 become 90 .

Here you can see MediaQuery.of Inside context Objects matter ：

• If the page MediaQuery.of It's using Scaffold External context , What you get is the top level MediaQueryData , Then when the keyboard pops up, it will cause the page rebuild
• MediaQuery.of It's using Scaffold Internal context , So what we get is Scaffold For MediaQueryData , For example, as mentioned above body , Obtained at the same time MediaQueryData Because of Scaffold The configuration of is different

therefore , This is shown in the following GIF , In fact, some people will push Corresponding to the routing place , By nesting MediaQuery To do some interception processing , For example, set the text to be non scalable , But in fact, this will cause the keyboard to pop up and collapse , Trigger each page to keep rebuild , For example Page 2 The process of ejecting the keyboard ,Page 1 It's also going on rebuild.

therefore , If you need to do some global interception , Recommend to pass useInheritedMediaQuery This method is used to do global processing .

return MediaQuery(
  data: MediaQueryData.fromWindow(WidgetsBinding.instance!.window).copyWith(boldText: false),
  child: MaterialApp(
    useInheritedMediaQuery: true,
  ),
);

So finally, make a summary , This chapter mainly clarifies ：

• MediaQueryData in viewInsets \ padding \ viewPadding The difference between
• MediaQuery And keyboard state
• MediaQuery.of Use different context Impact on performance
• adopt Scaffold Internal context Acquired MediaQueryData suffer Scaffold Influence

that , If you have any doubts after reading this article , Welcome to comment and exchange .