※本記事で使用している環境
<パソコン>
機種: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 をオフにする方法の解説を行いました。
今回は、SafeArea Widget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
おすすめ書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
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,
);
}
}
この状態では、Container Widget のなかに何もないので、真っ白の画面が表示されるだけです。
Container はただの箱のようなものです。
なんと、画面の一番上に表示されてしまいました。
文字が途中で切れてしまっていて、これでは全部の文字を読むことができません。
そこで登場するのが、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,
);
}
}
Container Widget にカーソルを合わせた状態で、以下のキーボードコマンドを押します。
Mac command + .
Win Ctrl + .
すると、様々な項目が表示されますので、「Wrap with widget…」をクリックします。
「Widget」と書かれている部分に「SafeArea」と書きましょう。
これにて、SafeArea Widget についての解説を終わります。
次は、ElevatedButton Widget についての解説を行います。
コメント