How to bring widget to front of screen – Flutter (Dart)

March 29, 2023

I use a Stack widget to put a NetworkImage on top of a Container, but the NetworkImage is behind the Container:

      Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.topRight,
        children: [
          Positioned(
            right: 0,
            child: CircleAvatar(
              radius: 20,
              backgroundImage: NetworkImage('image'),
            ),
          ),
          Container(...)

The ouput:

The desired effect is to have the black image in front of the container.

NOTE: This has nothing to do with the clipBehavior because the image is physically behind the Container so clipBehavior does nothing.

>Solution :

The Stack widget in Flutter allows you to overlap widgets. It’s working the way real stack is working.
For Example: If you put one box on another box then you will able to see second box easily and not the first one.

The same way stack widget will work. The last child will be visible as compare to first if they have same height and same width and even same position.

Here’s what you need to do

Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.topRight,
        children: [
          Container(....)
          ......
          Positioned(
            right: 0,
            child: CircleAvatar(
              radius: 20,
              backgroundImage: NetworkImage('image'),
            ),
          ),
       ],
),