Flutter如何在带有背景图和SafeArea的Scaffold上开发响应式部件

核心实现逻辑如下：

• 优先用MediaQuery或者LayoutBuilder获取当前设备的屏幕尺寸，所有组件的宽高、边距都用屏幕尺寸的比例值定义，避免硬编码固定像素导致的适配问题
• Stack的顶层盒子组件使用Align或者Positioned结合比例参数定位，适配不同屏幕的布局位置
• 图片组件设置fit属性的同时，限定最大/最小宽高，避免在极端尺寸设备上出现布局变形

修改后可直接运行的完整代码：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 获取当前屏幕尺寸
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        fit: StackFit.expand, // 让Stack子组件铺满整个屏幕
        children: <Widget>[
          // 底层背景图
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/background.png"),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.75), BlendMode.darken),
              ),
            ),
          ),
          SafeArea(
            // 顶层盒子图片居中放置
            child: Align(
              alignment: Alignment.center,
              child: Container(
                // 宽度为屏幕宽度的80%，同时限制宽高范围避免极端设备变形
                width: screenSize.width * 0.8,
                constraints: const BoxConstraints(
                  maxWidth: 600,
                  minWidth: 300,
                  maxHeight: 500,
                  minHeight: 250
                ),
                child: Image.asset(
                  "assets/images/72.png",
                  fit: BoxFit.contain, // 保证图片完整显示不被裁剪
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外优化建议：

• 如果需要放置多个盒子组件，可在外层嵌套Wrap或者GridView，设置子组件的间距为比例值，支持多盒子自适应排列
• 针对横竖屏切换的场景，可以监听Orientation变化，动态调整盒子的宽高比例
• 也可以使用第三方适配库简化尺寸适配逻辑，直接按照设计稿像素转换为适配不同设备的尺寸

内容的提问来源于stack exchange，提问作者Mohamed Mazen