Want to make BoxDecoration image faded/transparent in Flutter? You could give your DecorationImage a ColorFilter to make the background image grey (use a saturation color filter) or semi transparent (use a dstATop color filter).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import 'package:flutter/material.dart'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) => new Scaffold( appBar: new AppBar( title: new Text('Grey Example'), ), body: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ new Card( child: new Container( child: new Text( 'Hello world', style: Theme.of(context).textTheme.display4 ), decoration: new BoxDecoration( color: const Color(0xff7c94b6), image: new DecorationImage( fit: BoxFit.cover, colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop), image: new NetworkImage( 'http://www.allwhitebackground.com/images/2/2582-190x190.jpg', ), ), ), ), ), ], ), ); } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
