How to get an image above background while shadowing background in flutter

Question

I have an image and I want it to appear on my screen, above my background, with keeping background a bit dark type like in the image. I am thinking on using AlertDialog to display the image, but if you think there is a better way of doing it or a specific widget for this, please do tell me. Also please tell me what do we name this kind of image which hovers over background and focusing itself in UI.

enter code here

Just for trying out, I used this in my screen's initstate, as I want it to appear as soon as my screen appears -

super.initState();
    showDialog(
      context: context,
      builder: (BuildContext buildContext) {
        return AlertDialog(
          content: Center(
            child: Container(
              color: Colors.red,
              width: 200,
              height: 200,
            ),
          ),
        );
      }
    );

user_6879316 · Answer

You can use Stack widget withe three widget as children.

first children widget is your background screen.

second children widget is a Container widget with color .withOpacity().

third children widget is the image you are trying to show on top.

Like this:

    return Scaffold(
      body: Stack(
        children: [
          Container(
            color: Colors.white,
          ),
          Container(
            color: Colors.black.withOpacity(0.5),
          ),
          Center(
            child: Container(
              height: MediaQuery.of(context).size.height * 70 / 100,
              width: MediaQuery.of(context).size.width * 80 / 100,
              color: Colors.purple,
            ),
          ),
        ],
      ),
    );

for Visibility issue you can use this.

bool isVisible = false;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Stack(
        children: [
          Container(
            color: Colors.red,
            child: Center(
              child: Container(
                child: TextButton(
                  onPressed: () {
                    setState(() {
                      isVisible = true;
                    });
                  },
                  child: Text('Show Widget'),
                ),
              ),
            ),
          ),
          Visibility(
            visible: isVisible,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  isVisible = false;
                });
              },
              child: Container(
                color: Colors.white.withOpacity(0.5),
              ),
            ),
          ),
          Visibility(
            visible: isVisible,
            child: Center(
              child: Container(
                height: MediaQuery.of(context).size.height * 70 / 100,
                width: MediaQuery.of(context).size.width * 80 / 100,
                color: Colors.purple,
                child: Stack(
                  children: [
                    Positioned(
                      top: 0.0,
                      right: 0.0,
                      child: IconButton(
                        icon: const Icon(
                          Icons.close,
                          color: Colors.white,
                        ),
                        onPressed: () {
                          setState(() {
                            isVisible = false;
                          });
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

user_10157127 · Answer

initState doesn't contain context you can get context after first frame.

You can use addPostFrameCallback

 WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      showDialog(..);}

Or Future.delayed

 Future.delayed(Duration.zero).then((value) {
      showDialog(..); }

The dialog construction is :

  showDialog(
        context: context,
        builder: (BuildContext buildContext) {
          const double iconSize = 48;
          return LayoutBuilder(
            builder: (context, constraints) => AlertDialog(
              backgroundColor: Colors.transparent,
              elevation: 0,
              contentPadding: EdgeInsets.zero,
              content: SizedBox(
                width: constraints.maxWidth * .75,
                height: constraints.maxHeight * .75,
                child: Stack(
                  children: [
                    ///background image with fit Cover
                    Align(
                      alignment: Alignment.center,
                      child: Container(
                        width: constraints.maxWidth * .75 - iconSize,
                        height: constraints.maxHeight * .75 - iconSize,
                        color: Colors.cyanAccent,
                      ),
                    ),

                    Align(
                      alignment: Alignment.topRight,
                      child: GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.white, shape: BoxShape.circle),
                          child: const Icon(
                            Icons.close,
                            size: iconSize,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        },
      );

How to get an image above background while shadowing background in flutter

2 Answers