I have an illustration below, let's ignore the other details and focus on the bottom of the image. It has a faint white streak that I don't know how to achieve. It can be image blur or it can be color gradient. It's great that you guys can help me create that white blur.
Hope you got the solution!
Scaffold(
body: Stack(
alignment: Alignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image(
fit: BoxFit.fill,
image: AssetImage("assets/robot.jpg"),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
const Color(0x00000000),
const Color(0xFFFFFFFF),
],
),
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.red,
child: Icon(Icons.arrow_forward_ios),
),
);