【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part109 その他
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part109 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part108 その他
引き続き、その他について学びます。
SafeAreaウィジェット
SafeArea
ウィジェットは端末固有のレイアウト調整を不要にするウィジェットです。
iPhoneX系のノッチなどのことを指すそうです。
どのような技術なのでしょうかね。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage(title: 'テスト中!')));
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required 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: Center(
child: SafeArea(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(title: Text('aaaaaaaaaaaa$index'));
},
),
),
));
}
}
私が使用しているAndroid シミュレーターではわかるはずもなく。
以下のサイトで学習させていただきました。
FlutterのWidgetをコードを動かしながら学ぶ: SafeArea編 | DevelopersIO (classmethod.jp)
SafeAreaウィジェットを使わないとノッチのあるiPhone端末ではレイアウトが崩れてしまうんですね🤔
最後に
デザインのせいでSafeArea
ウィジェットというウィジェットが誕生したんですかね。
これからも特徴を持った端末はたくさん出てくると思うのですがSafeArea
ウィジェットはどこまで対応できるでしょうか。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません