Make BoxDecoration Bild verblasst/transparent

Question

Ich habe das folgende Code-Schnipsel und ich möchte das Bild so verblasst, dass es andere Gegenstände im Container nicht stört. Gibt es einen Filter, der dies erreichen könnte?

child: new Card(
    child: new Container(
    decoration: new BoxDecoration(
     color: const Color(0xff7c94b6), 
     image: new DecorationImage(
      image: new ExactAssetImage('lib/images/pic1.jpg'), 
      ) 
      ) 
    ) 
    ) 

Answer 1

Sie konnten geben Sie Ihre DecorationImage ein ColorFilter auf das Hintergrundbild grau zu machen (mit einem saturation Farbfilter) oder halbtransparent (mit einem dstATop Farbfilter).

-Code für dieses Beispiel ist unten.

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', 
       ), 
      ), 
      ), 
     ), 
     ), 
     ], 
    ), 
); 
} 

Das Widget Opacity ist eine weitere Option.

Sie können den Effekt auch auf das Asset anwenden.