2021/2/23 Widget of the Week – Flutter の SafeAreaの訳

On today’s devices, apps rarely get a neat little rectangle to run in.

今日のデバイスでは アプリを きれいな長方形画面だけで操作することは稀です。

Notification bars and controls can creep in,and rounded corners and notches nip at your content,complicating layouts.

通知バーとコントロールが忍び寄り、丸みを帯びた角とノッチがコンテンツを挟み、レイアウトが複雑になる可能性があります。

That’s why Flutter has SafeArea.

そこで Flutterの SafeAreaウィジェットを活用しましょう。

It uses a MediaQuery to check the dimensions of the screen and pads its shell to match.

MediaQueryを使用して画面のサイズを確認し、外枠を埋めてコンテンツが外枠とかぶるのを防ぎます。

So if your app looks like this,wrap it in a SafeArea,and keep your contents safe on both iOS and Android.

したがって、アプリがこのようになっている場合は、SafeAreaでラップし、iOSとAndroidの両方でコンテンツを適切なコンテンツ領域に表示できます。

↓

↓

You can even specify which dimensions you care about,

画面のどの範囲かを 指定することもでき

SafeArea(
  child:ListView(),
  top: true,
  bottom: true,
  left: false,
  right: true,
),

and wrapping the body of a Scaffold works great.

Scaffoldのbodyフィールドをラップするのがうまい使い方です。

@override
Widget build(BuildContext context){
  return Scaffold(
    body:SafeArea( //←👍
      child:TonsOfOtherWidgets(),
    ),
  );
}