【Flutter】SafeArea の使い方

2024年8月16日2024年9月15日

※本記事で使用している環境

＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh

＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）

前回は、flutter_lints をオフにする方法の解説を行いました。

公式ドキュメントの該当箇所

公式ドキュメントの解説は、以下のページにあります。

https://api.flutter.dev/flutter/widgets/SafeArea-class.html

SafeArea Widget を使わないとどうなるのか

前回使ったファイルで解説を行っていきます。

それを、以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Text("Hello Container"),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

「body」プロパティを書いて、 Container Widget を設置する

この状態では、Container Widget のなかに何もないので、真っ白の画面が表示されるだけです。

Container はただの箱のようなものです。

STEP

「child」プロパティを書いて、Text Widget を設置する

なんと、画面の一番上に表示されてしまいました。

文字が途中で切れてしまっていて、これでは全部の文字を読むことができません。

そこで登場するのが、SafeArea Widget です。

SafeArea Widget を使用する手順

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            child: Text("Hello Container"),
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

Wrap with widget …を選択する