基于Figma设计的Flutter图片叠加融合及阴影实现求助

完整修改代码 #

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 底层左侧图片
            Container(
              width: 235,
              height: 235,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/back1.png'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            // 上层带阴影的右侧叠加图片
            Positioned(
              left: 40, // 根据Figma设计调整偏移量，控制叠加程度
              child: Container(
                width: 279,
                height: 279,
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: AssetImage('assets/images/back1.png'),
                    fit: BoxFit.cover,
                  ),
                  // 阴影配置，匹配设计效果
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      blurRadius: 15,
                      offset: const Offset(5, 5),
                      spreadRadius: 2,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

核心改动点 #

• 替换布局结构：移除原有的Row和Expanded，改用Stack实现图片叠加。Row会强制两张图片平分宽度，导致间距；Stack可以让子组件重叠摆放，通过Positioned精准控制右侧图片的位置，消除间距。
• 添加阴影效果：在右侧图片的BoxDecoration中配置boxShadow属性，通过调整blurRadius（阴影模糊程度）、offset（阴影偏移方向）、spreadRadius（阴影扩散范围）和颜色透明度，还原Figma中的阴影样式。
• 调整叠加偏移：通过Positioned的left属性设置右侧图片相对于底层图片的偏移量，根据设计稿微调数值，达到预期的叠加融合效果。

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