Image 颤振：透明子对象，填充父对象'；背景色

我只是想显示相机的预览，让用户进行自拍

我有下面的代码片段，我想让人的图像透明（不是白色），并用颜色填充周围区域

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            Container(
              height: MediaQuery.of(context).size.height,
              child: Center(
                child: _cameraPreviewWidget(),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              color: Colors.grey[700].withOpacity(0.8),
              child: Align(
                alignment: Alignment.bottomCenter,
                child: SvgPicture.asset(
                  'assets/svg/selfie_person.svg',
                  alignment: Alignment.bottomCenter,
                  fit: BoxFit.cover,
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              child: Padding(
                padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * 0.05,
                  bottom: MediaQuery.of(context).size.height * 0.15,
                ),
                child: Column(
                  children: [
                    ListTile(
                      leading: InkWell(
                        onTap: () {
                          Navigator.pop(context, null);
                        },
                        child: FaIcon(
                          FontAwesomeIcons.arrowLeft,
                          color: Colors.white,
                        ),
                      ),
                      title: Center(
                        child: Text(
                          "Take a selfie",
                          style: Theme.of(context).textTheme.subtitle2,
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(
                        horizontal: MediaQuery.of(context).size.width * 0.05,
                      ),
                      child: Text(
                        "Take a quick selfie so we know it's you, this is never public",
                        style: Theme.of(context).textTheme.subtitle2,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 3,
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Expanded(
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: _captureButton(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

但是我面临的问题是，如果我将SVG设置为透明颜色，它将显示父级（容器）的颜色

我需要使人的图像完全透明，以看到摄像机的预览，并用颜色填充周围区域

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            Container(
              height: MediaQuery.of(context).size.height,
              child: Center(
                child: _cameraPreviewWidget(),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              color: Colors.grey[700].withOpacity(0.8),
              child: Align(
                alignment: Alignment.bottomCenter,
                child: SvgPicture.asset(
                  'assets/svg/selfie_person.svg',
                  alignment: Alignment.bottomCenter,
                  fit: BoxFit.cover,
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              child: Padding(
                padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * 0.05,
                  bottom: MediaQuery.of(context).size.height * 0.15,
                ),
                child: Column(
                  children: [
                    ListTile(
                      leading: InkWell(
                        onTap: () {
                          Navigator.pop(context, null);
                        },
                        child: FaIcon(
                          FontAwesomeIcons.arrowLeft,
                          color: Colors.white,
                        ),
                      ),
                      title: Center(
                        child: Text(
                          "Take a selfie",
                          style: Theme.of(context).textTheme.subtitle2,
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(
                        horizontal: MediaQuery.of(context).size.width * 0.05,
                      ),
                      child: Text(
                        "Take a quick selfie so we know it's you, this is never public",
                        style: Theme.of(context).textTheme.subtitle2,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 3,
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Expanded(
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: _captureButton(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

---

我不太理解你的问题，但我认为你应该试试不透明课。。用不透明度包装SVG

您可以查看：

---

也许你可以尝试制作一个新的图像，将前面的人的轮廓剪成正方形，而轮廓是空的。您的图像将是灰色部分，而不是现在的白色部分。这是一个好主意，如果我没有找到任何解决方案，我会这样做。如果我在SVG中使用不透明度，我将看到容器的背景色，但我想看看整个容器背后的内容（相机的预览）如果删除了容器，则背景颜色为灰色。你仔细看相机吗？是的，我看到相机的预览，甚至通过容器的背景色，因为不透明。在使用不透明度Svg后，你可以提供图像吗？？