I don't really know if it's possible but I'd like to make a Widget, like a box with some text on it, to have the opacity going from 100% to 0% across it. Here is an example made on Photoshop : Example

I don't know if it's possible or if there is a package which does that, but it would be really helpful !

CodePudding user response：

It seems you could use a linear gradient.

https://www.digitalocean.com/community/tutorials/flutter-flutter-gradient

CodePudding user response：

  decoration:
    BoxDecoration(
      color: const Color(0xff7c94b6),
      image: new DecorationImage(
        fit: BoxFit.cover,
        colorFilter: 
          ColorFilter.mode(Colors.black.withOpacity(0.2), 
          BlendMode.dstATop),
        image: new NetworkImage(
          'http://www.server.com/image.jpg',
        ),
      ),
    ),

ColorFilter.mode check the code above

CodePudding user response：

You should use Container with LinearGradient

child: Container(
          height: 200,
          width: double.infinity,
          decoration:  BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                const Color(0xff3220f5),
                const Color(0xff3220f5).withOpacity(0),
              ],
            ),
          ),
          child: const Center(
            child: Text(
              'Hello World',
              style: TextStyle(
                fontSize: 58,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),

CodePudding user response：

Try this:

Container(
      height: 50,
      width: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        gradient: const LinearGradient(
          colors: [
            Colors.blueAccent,
            Colors.white,
          ],
        ),
      ),
      child: TextButton(
        style: ButtonStyle(
          shape: MaterialStateProperty.all(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(borderRadius),
            ),
          ),
          overlayColor:
              MaterialStateColor.resolveWith((states) => Colors.blue),
        ),
        onPressed: onTap,
        child: Center(
          child: Text(
            'Hello world',
            style: textStyleButton
          ),
        ),
      ),
    );