SafeAreaとノッチ

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 13/30。

ほとんどのスマートフォンの画面は、きれいな長方形ではありません。時計やカメラの切り欠きが上部を覆い、ホームバーが下部を覆っています。AppBarはこのことを認識してタイトルを下に移動しますが、AppBarのないページは時計の下、画面の最上端から始まります。

SafeAreaは、その領域から子ウィジェットを移動します。

Scaffold(
  body: SafeArea(
    child: Column(
      children: [...],
    ),
  ),
)

スマートフォンに各端がどれだけ覆われているかを尋ね、その分だけ正確に余白を追加します。切り欠きのないスマートフォンでは何も追加しないため、同じコードがすべてのスマートフォンで使えます。

固定のPaddingではこれができません。ステータスバーの高さが47ピクセルのスマートフォンでは16ピクセルでは足りず、ステータスバーがないスマートフォンでは多すぎます。

チャレンジ

簡単

ノッチのあるスマートフォンでは、Good morningが時計の下に隠れ、ボタンがホームバーに重なります。ページ全体がその両方に重ならないようにしましょう。

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.orange.shade50,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('Good morning', style: TextStyle(fontSize: 32)),
            const Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Start workout'),
            ),
          ],
        ),
      ),
    );
  }
}