現在智慧手機裝置有各種型號（iOS 和 Android），總有些時候，靠邊（上、下、左、右）的地方會被遮擋，那麼我們怎麼排除此問題呢？🤔
此時可以使用 SafeArea Widget。
我以 iPhone 11 為例，可以看到截圖上的字被狀態列給蓋住。
此為原本呈現的程式碼：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Happy Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Container(
color: Colors.green,
child: Text(
'HappyMan Studio :)\nHappyMan Studio :)\nHappyMan Studio :)\n'),
),
);
}
}
已加入 SafeArea 的程式碼：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Happy Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Container(
color: Colors.green,
child: SafeArea(
child: Text(
'HappyMan Studio :)\nHappyMan Studio :)\nHappyMan Studio :)\n'),
)
),
);
}
}
很簡單地，把 Text 包裹在 SafeArea 之中。🙃
效果如截圖：
可參考：
SafeArea (Flutter Widget of the Week)
逍遙文工作室 
隨意留個言吧：）～