Flutter如何在页面body中间创建叠加在背景上的Card组件

问题排查&解决方案 #

• 核心报错原因1：你调用SvgPicture.network加载的是PNG格式的图片资源，SVG渲染组件无法解析PNG格式，直接触发渲染异常导致白屏，PNG图片请改用Image.network加载。
• 核心报错原因2：你提供的两段代码均存在语法不完整、括号未闭合的问题，Dart语法校验不通过会直接导致页面无法渲染。
• 布局逻辑问题：要实现Card叠加在背景上的层叠效果，需要使用Stack作为父容器承载背景层和上层的Card组件，你当前的代码结构未使用层叠布局，无法实现目标效果。

以下是可直接运行的完整示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack( // 层叠布局容器，实现上下层叠加效果
          children: [
            // 底层背景，可替换为你的自定义背景图/背景样式
            Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.blueAccent,
            ),
            // 上层标题区域
            const Positioned(
              top: 30,
              right: 30,
              child: Text(
                'Profile',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 35,
                    fontWeight: FontWeight.bold
                ),
              ),
            ),
            // 叠加显示的Card组件
            Positioned(
              top: 100,
              left: 20,
              right: 20,
              child: Card(
                elevation: 8,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16)
                ),
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Image.network(
                        'https://www.pngall.com/wp-content/uploads/5/Profile-Male-PNG.png',
                        height: 80,
                      ),
                      const SizedBox(height: 16),
                      const Text(
                        'User Name',
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
                      )
                      // 可在此扩展Card内的其他内容
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Imam Rizky GANTENG