'drawing an image on top of another in flutter
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 1:[1]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | WSBT |
