Fading image in Flutter - flutter

Question

Can anyone please explain how to get this image shading effect in Flutter.

Answer 1

I assume you want to get the fading out background. The best way to do it is to use a Stack, with your background image at the bottom, a gradient going from your background color to transparent above it, and then your UI elements above that. Here is a working example build:
#override
Widget build(BuildContext context) {
return Material(
child: Stack(
fit: StackFit.expand,
children: [
Image.asset('assets/background.jpg', fit: BoxFit.cover,),
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter, end: Alignment.bottomCenter,
colors: [Colors.transparent, Colors.white],
stops: [0, .4]
)
),
),
Padding(padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: const [
Icon(Icons.arrow_back),
Expanded(child: Center(child: Text('Steve Johnson',
style: TextStyle(fontSize: 18)
))),
Icon(Icons.remove_circle_outline_sharp)
],
),
const SizedBox(height: 32,),
Container(
height: 96, width: 96,
decoration: BoxDecoration(
border: Border.all(color: Colors.deepOrange, width: 4),
color: Colors.white,
),
child: Image.asset('assets/profile.jpg',
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,),
),
],
)
)
]
)
);
}