如何在不使用SafeArea的情况下为Scaffold添加自适应顶部内边距？

1. 解决顶部内容重叠&自适应内边距 #

直接用SafeArea组件包裹你的Column，它会自动识别设备状态栏、刘海屏等的高度，给内容加上适配的顶部内边距，彻底解决重叠问题。

2. 设置背景随主题自动调整/透明 #

给Scaffold设置backgroundColor: Colors.transparent，这样页面背景会自动继承系统主题的背景色（深色模式下是深色，浅色模式下是浅色），实现随主题自适应的效果。

修改后的完整代码 #

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 设置背景透明，跟随系统主题
      backgroundColor: Colors.transparent,
      body: SafeArea(
        // 包裹内容，自动适配顶部状态栏高度
        child: Column(
          children: [
            TextWidget(
                descriptionText: "Sign In!",
                selectedFontColor: ColourPalette.primaryColor,
                selectedFontWeight: FontWeight.normal,
                selectedFontSize: 25),
            SignInButton(
              Buttons.google,
              text: "Sign up with Google",
              onPressed: () {
                AuthServices().signInWithGoogle();
              },
            )
          ],
        ),
      ),
    );
  }
}

如果不想用SafeArea，也可以手动用Padding控制顶部内边距，代码如下：

body: Padding(
  padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
  child: Column(
    // 原内容不变
  ),
)

内容的提问来源于stack exchange，提问作者jpg.hue