Darken edges of an Image in flutter?

Question

Asked by Ian R on May 26, 2018 (source).

How can I add Shades to the edges of an Image in flutter, so that white overlayed text would be readable? I want it to look just like in the Contacts app: Shaded edges

I've already checked the Image class, but all I see there is color and colorBlendMode, which wouldn't be the easiest way of doing this, im sure.

Answer

Question answered by Ian R (source).

I solved my issue using following code. (When doing this, dont use box-shadow. It leads to everything being dark):

Stack(
  children: <Widget>[
    Image(
      fit: BoxFit.cover,
      image: AssetImage("assets/test.jpg"),
      height: MediaQuery.of(context).size.width * 0.8,
      width: MediaQuery.of(context).size.width,
    ),
    Container(
      height: MediaQuery.of(context).size.width * 0.8,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            const Color(0xCC000000),
            const Color(0x00000000),
            const Color(0x00000000),
            const Color(0xCC000000),
          ],
        ),
      ),
    ),
    new Padding(
      padding: const EdgeInsets.all(16.0),
      child: Text("TXT", style: Theme.of(context).primaryTextTheme.title,),
    ),
  ],
),
COLOR-BLENDING FLUTTER SHADOW
SHARE: