[ Flutter ] Blurry Text

텍스트를 상황에 맞게 보여주고 안보여주고 처리를 위해 blur 처리를 이용

 

금액을 보여주는 부분을 만들면서 blur처리를 하며 보이고 안보이고를 선택할 수 있도록 기능을 처리

 

 

---

BackdropFilter

backdropFilter를 사용하면 backdropFilter위에 작성한 내용들을 blur처리를 한다

background의 배경을 blur처리 하는 것이므로 

child안에는 blur처리를 안하는 내용들이 들어간다.

 

텍스트 하나만 blur처리를 하고자 child에는 빈 영역을 넣어주어 blur처리가 되는 영역을 잡아준다.

child: BackdropFilter(
        filter: ImageFilter.blur(
        sigmaX: 5.0sigmaY: 5.0),
        child: Container(
	        width: double.infinity,
    		height: 30.0,
	),
),

 

sigmaX 와 sigmaY 값이 클수로 blur의 효과가 증가한다.

낮을수록 blur 효과는 사라진다.

 

이렇게 하면 backdropFilter의 위에 작성한 Text가 blur 처리가 된다.

Text(
        "${formatMoney(incomeValue)} 원",
        style: TextStyle(
        color: textColor,
        fontSize: 20.0,
		fontWeight: FontWeight.bold,
	),
),
child: BackdropFilter(
        filter: ImageFilter.blur(
        sigmaX: 5.0sigmaY: 5.0),
        child: Container(
	        width: double.infinity,
    		height: 30.0,
	),
),

 

하지만 추가적으로 Text위에 또 Text가 있는 경우

아래 Text만을 영역을 잡아줘야하므로 영역을 분리해준다.

 

Stack을 활용하여 children에 있는 내용들이 겹쳐질 수 있도록 처리

ClipRect로 블러 영역을 잡아준다.

   children: [
              Column(
                children: [
                  Text(
                    "테스트 텍스트",
                    style: TextStyle(color: textColor, fontSize: 14.0),
                  ),
                  SizedBox(height: 8.0),
                ],
              ),
              Stack(
                alignment: Alignment.center,
                children: [
                  Text(
                    "${formatMoney(incomeValue)} 원",
                    style: TextStyle(
                      color: textColor,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  ClipRect(
                    child: BackdropFilter(
                      filter: ImageFilter.blur(
                          sigmaX: 5.0, sigmaY: 5.0),
                      child: Container(
                        width: double.infinity,
                        height: 30.0, 
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),