I'm trying to add bottom rounded corners to the image. I wrapped my image in a ClipRRect and gave it a border radius. Below is what I was able to do: Image with border radius
However, I want the image to look something like this: enter image description here
Below is my code:
AnimatedContainer(
duration: Duration(milliseconds: 150),
curve: Curves.easeIn,
width: width,
height: imageHeight * height,
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(100),
bottomRight: Radius.circular(100),
),
child: Image.asset(
'assets/images/bg_login.jpg',
fit: BoxFit.cover,
),
),
),
Try this:
Container(
height: MediaQuery.of(context).size.height * 0.5,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.elliptical(
MediaQuery.of(context).size.width * 0.5, 45.0),
topRight: Radius.elliptical(
MediaQuery.of(context).size.width * 0.5, 45.0),
),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("images.jpg"),
),
),
)
This should work with an animated container as well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.