image - Flutter:具有填充父级背景颜色的透明子级

Question

我只是想显示相机的预览并对齐用户以进行自拍。

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

但我面临的问题是，如果我将 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(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

Answer 1

我不太明白你的问题，但我认为你应该尝试 Opacity 类..用 Opacity 包装你的 SVG

你可以检查一下:

https://api.flutter.dev/flutter/widgets/Opacity-class.html