現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】SafeAreaの使い方|ステータスバーに重なる邪魔なWidgetを対処

今回は「SafeArea」の基本的な使い方について紹介します。

SafeAreaを使えばスマホなどのステータスバーや画面下のバーに重なってしまうWidgetを邪魔にならない領域に収めることができます!

目次

SafeAreaの基本プロパティ

  • child
  • left, top, right, bottom

SafeAreaなし

SafeAreaなしの場合、上画像のようにText(Hello World)とステータスバーが重なってしまいます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: Container(
          color: Colors.white,
          child: Text("Hello World"),
        ),
      ),
    );
  }

SafeAreaあり

SafeAreaありの場合、ステータスバーなどに重ならないよう指定したWidgetを邪魔にならない領域に表示できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Container(
            color: Colors.white,
            child: Text("Hello World"),
          ),
        ),
      ),
    );
  }

left, top, right, bottom

画面側面を指定してSafeAreaを無効化できます。今回は「top: false」で上部のSafeAreaを無効化させています。

//上部のSafeAreaを無効化
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          top: false,
          child: Container(
            color: Colors.white,
            child: Text("Hello World"),
          ),
        ),
      ),
    );
  }

以上です。

  • URLをコピーしました!
目次
閉じる