使BoxDecoration圖像褪色/透明

我有以下代碼片段，我想使圖像褪色，使其不會干擾容器中的其他項目。有沒有可以實現這一目標的過濾器？使BoxDecoration圖像褪色/透明

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

來源

2017-06-18 driftavalii

你可以給你的DecorationImage一個ColorFilter使背景圖像灰度（使用saturation彩色濾光片）或半透明（使用dstATop彩色濾光片）。

代碼本例中爲下方。

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

Opacity小工具是另一種選擇。

您也可以預先將效果應用於資產。

來源

2017-06-18 09:47:15

不透明度小部件似乎影響整個容器的內容，這不是我想要的。我已經申請了這個效果。我如何使用ColorFilter使其透明？將顏色設置爲灰色似乎可以覆蓋blendmode可能具有的任何效果。謝謝。 – driftavalii

對於不透明度，您可以使用堆棧將某些東西放在圖像上。我更新了我的答案，爲ColorFilter方法提供了一個代碼示例。 –

使BoxDecoration圖像褪色/透明

回答

相關問題