fluttershadowcolor-blending

Darken edges of an Image in flutter?


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.


Solution

  • 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,),
        ),
      ],
    ),