Flutter 박스 데코레이션 이미지를 흐릿하게/투명하게 만드세요., Make BoxDecoration image faded/transparent

질문

다음 코드 스니펫이 있으며 이미지가 컨테이너 내의 다른 항목과 간섭하지 않도록 이미지를 흐리게 만들고 싶습니다. 이를 수행할 수 있는 필터가 있을까요?

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

답변

당신은 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 위젯은 또 다른 옵션입니다.

또한 이 효과를 에셋에 사전에 적용할 수도 있습니다.