Flutter:填充父对象背景色的透明子对象

hjqgdpho  于 7个月前  发布在  Flutter
关注(0)|答案(2)|浏览(104)

我只是试图显示相机的预览和调整用户采取自拍。
我有下面的代码片段,我想使人的形象透明(而不是白色),并填补周围地区的颜色。
但我面临的问题是,如果我将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(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

字符串


的数据

r1zhe5dt

r1zhe5dt1#

我不太明白你的问题,但我认为你应该试试不透明度类..用不透明度 Package 你的SVG
你可以检查一下:
https://api.flutter.dev/flutter/widgets/Opacity-class.html

3j86kqsm

3j86kqsm2#

如果你想给予不透明的任何部件,这里是实际的代码如何可以添加不透明度:

Opacity(
    opacity: 0.2,
    child: SvgPicture.asset(
      'assets/image/icon.svg', // your assets svg path will be here
    ),
  ),

字符串

相关问题