본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 흐릿한 장식 이미지, Blurred Decoration Image in Flutter

by 베타코드 2024. 1. 3.
반응형

질문


내 앱의 배경은 다음과 같이 설정되어 있습니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new ExactAssetImage('assets/lol/aatrox.jpg'),
            fit: BoxFit.cover,
          ),
        ),
        child: new BackdropFilter(filter: new ImageFilter.blur(sigmaX: 600.0, sigmaY: 1000.0)),
        width: 400.0,
      ),
    );
  }
}

DecorationImage를 흐리게 만들고 싶어서 Container에 BackdropFilter를 추가했지만, 어떤 변화도 보이지 않습니다. 무엇이 잘못되었을까요?


답변


이렇게 하면 컨테이너의 자식을 흐리게 할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new ExactAssetImage('assets/dog.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: new BackdropFilter(
          filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: new Container(
            decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
          ),
        ),
      ),
    );
  }
}

screenshot

반응형

댓글