drawing an image on top of another in flutter

Issue

I use stack to place images, my back image is drawn on top of the other one, how can i fix the posterpath to be on top, also top image doesn't round the edges:

 return Stack(
  children: [
    Positioned(
      child: AspectRatio(
        aspectRatio: 390 / 220,
        child: ColorFiltered(
          colorFilter: ColorFilter.mode(
            Colors.black.withOpacity(0.3),
            BlendMode.dstATop,
          ),
          child: backdropPath != null
              ? Image.network(ImageDownloader.imageUrl(backdropPath))
          : Image.asset(AppImages.noImageBig),
        ),
      ),
    ),
    Positioned(
      child: Center(
        child: Padding(
          padding: const EdgeInsets.only(top: 110.0),
          child: Container(
            clipBehavior: Clip.antiAlias,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(12)),
            ),
            height: 212.0,
            width: 174.0,
            child: posterPath != null
                ? Image.network(ImageDownloader.imageUrl(posterPath))
            : Image.asset(AppImages.noImageBig),
          ),
        ),
      ),
    ),

Solution

The ordering of children in a Stack is determined by their order in the source code - later items in the list are drawn on top. If you want to switch the z-order of the two children, swap them in the source code.

For your second question, you can achieve "rounded corner" with ClipRRect widget.

Answered By - user1032613