【Flutter】Widget of the Week #1 SafeArea

【Flutter】Widget of the Week #1 SafeArea

Googleさん公式Youtube「Widget of the Week」で紹介されている、
ウィジェットのサンプル集第1弾はSafeArea(セーフエリア)です!

SafeAreaってなに?

わかりやすく言えば、「コンテンツが表示されるエリア」です\_(・ω・`)ココ重要!

iPhoneX以降だと画面が角丸なことに加え、画面上部のノッチや、画面下部のHomeBarとコンテンツ(ボタンなど)が被ってしまい、操作ができない場合があります。
SafeArea ウィジェットを使うことによって、端末に合わせてコンテンツを表示してくれます!

公式からの説明は以下の通り。

Flutter の SafeArea ウィジェットで、通知バーや携帯電話のノッチが皆さんのアプリの UI に入り込むのを防ぎましょう。MediaQuery を使って画面範囲を調べ、child ウィジェットを画面に合わせ、iOS でも Android でもアプリが必ず適切なコンテンツ領域に配置されるようにしましょう。

公式Youtubeより引用

ウィジェットってなに?

FlutterのUIを構築しているパーツのことであり、
色々なWidgetを組み合わせることによって複雑なUIを表現することが可能になります!

 Widget of the Week – #1 Flutter SafeArea

まずは1分程度の公式の動画「Widget of the Week」を見て概要を把握しましょう!

 

概要をなんとなく把握できたところで、
SafeArea Widgetの有無の差を見ていきましょう(∩’-‘⊂)シュッ

SafeArea Widgetなしの場合

ノッチとホームバーがコンテンツに被ってしまっていますね。

SafeArea Widgetありの場合
ノッチとホームバーにスペースが作成され、コンテンツが被らなくなっています!

Sample Code

上記の画像のSafeArea Widgetありの完成形サンプルコードです!

構造としては3つの赤いBOXがあるListViewをSafeAreaでラップして(囲って)います。

Point

動画でも説明されていた通り、
Scaffold の body内のWidgetを SafeArea でラップするのが一番簡単な方法です。

主要なProperties

bottom, left, right, top
これらはbool値のtrueかfalseで返すことで、
SafeAreaWidgetの適用可否を決定するプロパティです\_(・ω・`)ココ重要!

Sample Code 2

SafeAreaWidgetにプロパティを追加したコードです。

top(上)とright(右)はSafeAreaWidget適用され、
left(左)とbottom(下)の2箇所はSafeAreaが適用されていないことを確認してみます!

スマホが縦の状態
top(上)は適用され、bottom(下)は適用されていないことがわかりますね!
この時左右に邪魔するものはないのでSafeAreaWidget適用可否は関係ありません。

スマホが横向きの状態

 Point

わかりやすいように明示的にtrueも記載しましたが、
初期値がtrueなので、下図のようにtrueを削除しても結果は同じです!

あとがき

お疲れ様でした!
これでiPhoneX以降の実装も怖くないですね(∩’-‘⊂)シュッ

次回は Expandedの紹介です!
それでは次の記事で会いましょう!

Flutterカテゴリの最新記事