SafeArea

Flutter Widget of the Week: SafeArea-Flutter

Flutter Article

はじめに

この記事はFlutter Widget of the Weekで紹介されたWidgetを使ってみることを目的としてます。 ざっくりとた使い方をコードとスクショをもとに紹介できたらと思います。

今回はSafeAreaです。

参考

概要

OSに依存する表示と被らないようにしてくれる。画面上部のステータスバーに被らないなどなど。

以下のようにSafeAreaで包んだ場合には被らないようになっている。

SafeAreaで包んだ場合 WrapWithSafeArea

SafeAreaで包んでいない場合 NotWrapWithSafeArea

以下のコード:GitHub

SafeAreaで包んでいない場合
class WrapWithSafeArea extends StatelessWidget {
  const WrapWithSafeArea({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ListView(
          children: List.generate(
            20,
            (idx) => ListTile(title: Text('ListTile $idx')),
          ),
        ),
        floatingActionButton: const BackPageButton(),
      ),
    );
  }
}
SafeAreaで包んでいない場合
class NotWrapWithSafeArea extends StatelessWidget {
  const NotWrapWithSafeArea({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: List.generate(
          20,
          (idx) => ListTile(title: Text('ListTile $idx')),
        ),
      ),
      floatingActionButton: const BackPageButton(),
    );
  }
}