SafeArea Widget (Widget of the week)

SafeArea Widget ဆိုတာဘာလဲ?

ခုနောက်ပိုင်းထွက်လာတဲ့ ဖုန်းတွေမှာ အရင်ကလိုမျိုး screen က လေးထောင့်ကျမနေတော့ဘူး။ ဘောင်တွေက အကွေးတွေဖြစ်လာပြီး အပေါ်အောက် notch တွေပါလာတယ်။ တကယ်လို့ app ရေးတဲ့အခါ အဲ့လိုမျိုးတွေကို သတိမထားတဲ့အခါ ကိုယ့်ပြချင်တဲ့ content တွေ၊ user action တွေအတွက် button တွေဟာ ကြည့်မရ၊ နှိပ်မရနဲ့ user experience ကို အများကြီး အနှောင့်အယှက်ဖြစ်လာနိုင်တယ်။

အဲ့အတွက် flutter မှာ SafeArea ဆိုတဲ့ widget ကိုသုံးပြီး အလွယ်တကူ အဲ့လိုပြဿနာတွေကို ရှောင်ရှားနိုင်ပါတယ်။

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RaisedButton(
        child: Text("Click me"),
        onPressed: (){},
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: RaisedButton(
          child: Text("Click me"),
          onPressed: (){},
        ),
      ),
    );
  }
}

တကယ်လို့ကိုယ်က default ပေးထားသလို အပေါ်အောက် သူ့ဘာသာ detact လုပ်တာမျိုးမဟုတ်ဘဲ အပေါ်ကိုပဲ သတ်မှတ်ချင်တယ် အောက်ကိုပဲသတ်မှတ်ချင်တယ်ဆိုရင် top, bottom စတဲ့ သက်ဆိုင်ရာ ဘက်အခြမ်းကိုပဲ သတ်မှတ်ပေးလို့ရတယ်။ သူ့ minimum value တွေကို မကြိုက်ဘူးဆိုလဲ ကိုယ့်ဘာသာ minimum ဆိုပြီး သတ်မှတ်လို့ရပါတယ်။

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        bottom: false,
        minimum: EdgeInsets.all(32),
        child: RaisedButton(
          child: Text("Click me"),
          onPressed: (){},
        ),
      ),
    );
  }
}