Flutter移动端欢迎页无法铺满屏幕底部的问题求助

大家好，我正在用Flutter开发一款移动应用，但遇到了显示问题：在我的TECNO KF7j真机上测试时，欢迎页面无法铺满屏幕底部，底部有一块区域没有被内容覆盖。

下面是我的相关代码：

Welcome Screen 代码 #

// Welcome screen
import 'package:barkcv_app/screens/signin_screen.dart';
import 'package:barkcv_app/screens/signup_screen.dart';
import 'package:barkcv_app/theme/theme.dart';
import 'package:barkcv_app/widgets/welcome_button.dart';
import 'package:flutter/material.dart';
import '../widgets/custom_scaffold.dart';

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      child: Column(
        children: [
          Flexible(
            flex: 7,
            child: Container(
              padding: const EdgeInsets.symmetric(
                vertical: 0,
                horizontal: 20,
              ),
              child: Center(
                child: RichText(
                  textAlign: TextAlign.center,
                  text: const TextSpan(
                    children: [
                      TextSpan(
                        text: 'Bienvenu chez\n BarkCV\n',
                        style: TextStyle(
                          fontSize: 45,
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      TextSpan(
                        text: '\nEnvoyez juste votre ancien CV',
                        style: TextStyle(
                          fontSize: 24,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).padding.bottom,
                ),
                child: Row(
                  children: [
                    const Expanded(
                      child: WelcomeButton(
                        buttonText: 'Se connecter',
                        onTap: SignInScreen(),
                        color: Colors.transparent,
                        textColor: Colors.white,
                      ),
                    ),
                    Expanded(
                      child: WelcomeButton(
                        buttonText: "S'inscrire",
                        onTap: const SignUpScreen(),
                        color: Colors.white,
                        textColor: lightColorScheme.primary,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

CustomScaffold 代码 #

// custom_scaffold.dart
import 'package:flutter/material.dart';

class CustomScaffold extends StatelessWidget {
  const CustomScaffold({super.key, this.child});

  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(color: Colors.white),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      extendBodyBehindAppBar: true,
      extendBody: true, // Extend body behind the navigation bar
      body: Stack(
        children: [
          Image.asset(
            'assets/images/cv-logo.jpeg',
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
          ),
          // Apply padding only to top/left/right using MediaQuery
          Padding(
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top,
              left: MediaQuery.of(context).padding.left,
              right: MediaQuery.of(context).padding.right,
            ),
            child: child!,
          ),
        ],
      ),
    );
  }
}

WelcomeButton 代码 #

//welcome_button.dart
import 'package:flutter/material.dart';

class WelcomeButton extends StatelessWidget {
  const WelcomeButton({super.key, this.buttonText, this.onTap, this.color, this.textColor});

  final String? buttonText;
  final Widget? onTap;
  final Color? color;
  final Color? textColor;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(builder: (e) => onTap!));
      },
      child: Container(
        padding: EdgeInsets.only(left: 25.0, top: 25.0, right: 25.0, bottom: 15.0),
        decoration: BoxDecoration(
          color: color!,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(50),
          ),
        ),
        child: SafeArea(
          child: Text(
            buttonText!,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 19.0,
              fontWeight: FontWeight.bold,
              color: textColor!
            ),
          ),
        ),
      ),
    );
  }
}

我的Flutter环境信息：

flutter doctor -v
[✓] Flutter (Channel stable, 3.32.8, on Ubuntu 24.04.3 LTS 6.14.0-28-generic, locale en_US.UTF-8)
[86ms] • Flutter version 3.32.8 on channel stable

问题分析与解决方案尝试方向 #

我先帮你排查几个可能的原因：

• 底部安全区域处理冲突：CustomScaffold里给内容只加了顶部、左右的padding，但WelcomeScreen里的底部按钮又手动加了底部安全区域的padding，可能导致内容被向上推，留空底部
• 背景图适配不彻底：虽然设置了背景图宽高为无限大，但有些设备的沉浸式导航栏需要更明确的布局约束才能让背景铺满
• Flex布局权重适配问题：7:1的flex比例在特定屏幕尺寸下，可能让底部按钮区域的高度不足以撑满剩余空间

具体修复建议 #

方案一：统一安全区域处理逻辑

修改CustomScaffold的padding，让内容可以延伸到底部，然后用SafeArea包裹底部按钮，避免手动计算padding：

// CustomScaffold中的Padding修改
Padding(
  padding: EdgeInsets.only(
    top: MediaQuery.of(context).padding.top,
    left: MediaQuery.of(context).padding.left,
    right: MediaQuery.of(context).padding.right,
    bottom: 0, // 移除底部padding限制
  ),
  child: child!,
),

// WelcomeScreen中的底部按钮区域修改
Flexible(
  flex: 1,
  child: Align(
    alignment: Alignment.bottomRight,
    child: SafeArea( // 用SafeArea替代手动padding
      child: Row(
        children: [
          // 按钮代码保持不变
        ],
      ),
    ),
  ),
),

方案二：确保背景图完全铺满屏幕

给背景图外层包裹Positioned.fill()，强制它覆盖整个Stack区域：

Stack(
  children: [
    Positioned.fill( // 添加这个组件
      child: Image.asset(
        'assets/images/cv-logo.jpeg',
        fit: BoxFit.cover,
      ),
    ),
    // 原padding和child代码不变
  ],
),

方案三：调整Column布局方式

给Column设置mainAxisAlignment: MainAxisAlignment.spaceBetween，让顶部内容居中，底部按钮直接贴到底部：

return CustomScaffold(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, // 添加这个属性
    children: [
      Flexible(
        flex: 7,
        child: // 顶部内容不变
      ),
      // 去掉Flexible，直接用SafeArea包裹按钮行
      SafeArea(
        child: Row(
          children: [
            // 按钮代码不变
          ],
        ),
      ),
    ],
  ),
);

你可以先试试这些方案，看看哪个能解决你的问题。如果还有问题，补充一张屏幕截图会更方便定位问题哦。

内容来源于stack exchange