CODEWITHSUNDEEP
imageflutterflutter-layouttransparency
Ahmed Mehanna
Ahmed Mehanna

Reputation: 141

Flutter: Transparent child with fill parent's background color

I am just trying to display the camera's preview and align the user to take a selfie.

I have the following snippet of code and I would like to make the person's image transparent (not white) and fill the surrounding area with color.

but the problem that I am facing, if I set the SVG with transparent color, it will display the color of the parent (container),

I need to make the person's image totally transparent to see the camera's preview with filling the surrounding area with color.

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(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

selfie photo screen

Upvotes: 3

Views: 5538

Answers (2)

Pratik Butani
Pratik Butani

Reputation: 62419

If you want to give opacity to any widget, Here is the actual code how you can add the Opacity:

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

Upvotes: 1

ElsayedDev
ElsayedDev

Reputation: 650

I don't understand your question well, but i think you should try Opacity class .. wrap your SVG with Opacity

You can check it :

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

Upvotes: 1

Related Questions