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),
),
),
),
),
CodePudding user response:
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.