Flutter development: use safearea

Preface

stay Flutter In development , The adaptation of various mobile phone models is a very important thing , In especial Android There are too many and miscellaneous models of the system , Fitting is not easy , And for iOS Systematic iPhone Mobile phone “ bang ” Adaptation is also a key knowledge point . So this blog post is about SafeArea Use ,SafeArea It is also the best weapon for all kinds of strange and irregular screens , Easy to read and use .

principle

SafeArea It's through MediaQuery To check the screen size , Make the size of the application fit the screen , And then back to a Padding Widget To wrap the compiled page , In this way, the page will not be blocked by the irregular screen .SafeArea Basically beautified Padding The widget , If you use SafeArea Wrap another widget , It will add the necessary padding required , To prevent the widget from being used by the system status bar of various manufacturers 、 Notch 、 hole 、 Fillets and others " originality " The function is blocked .

Example

Next, let's make a comparative demonstration on whether to set a security zone , Compare the use SafeArea Post and unused SafeArea The effect of . The specific code is as follows ：

1、 Before the change , Code example without security zone settings ：

Widget build(BuildContext context) {

    return Scaffold(

        backgroundColor: Color.fromRGBO(241, 241, 241, 1),

        body: Column(children: [

          _buildhead(),

          Expand