SafeAreaを使うことで、デバイスの形によってアプリのコンテンツが見切れたりするのを防いでくれます。レイアウトの調整はSafeAreaがやってくれます。
今回はSafeAreaを使っていないパターンと使ったパターン、それぞれ紹介します。
目次
動作イメージ
SafeAreaを使っていないダメなパターン

SafeAreaを使ったパターン

SafeAreaがデバイスの形に応じたレイアウト調整をやってくれる。
サンプルコード
SafeAreaを使っていないダメなパターン
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Sample Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(itemBuilder: (BuildContext context, int index) {
return Text(
"This text is unsafe.",
style: TextStyle(
fontSize: 30,
),
);
}),
);
}
}
SafeAreaを使ったパターン
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Sample Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
child: ListView.builder(itemBuilder: (BuildContext context, int index) {
return Text(
"This text is safe.",
style: TextStyle(
fontSize: 30,
),
);
}),
),
);
}
}
説明
SafeAreaの実装部分は以下の通りです。
SafeArea(
child: ListView.builder(itemBuilder: (BuildContext context, int index) {
return Text(
"This text is safe.",
style: TextStyle(
fontSize: 30,
),
);
}),
)
使い方は簡単です。表示したいwidgetをSafeAreaでラップするだけです。
今回の場合はListViewをSafeAreaでラップしています。
関連記事
◆ 「Widget of the Week」の日本語翻訳版
【日本語版】【Flutter】Widget of the Week – #1 SafeArea【要約】