[ Flutter ] Text Rich

Text를 사용하다 보면 문구 중 일부만 따로 style을 추가적으로 넣고 싶은 경우가 있다

이때 Text.rich를 사용하면 전체 style뿐만 아니라 개별로도 style을 적용을 쉽게 처리할 수 있다.

---

Text Rich

 

Text.rich안에 TextSpan을 활용하여 영역을 나눠준다.

이때 모든 Text에는 일괄적으로 동일한 style을 주기 위해

TextSpan안에 TextSpan을 넣어서 개별로 관리를 할 수 있도록 처리

 

TextSpan의 style을 적용하면 TextSpan안의 항목들은 모두 동일한 style이 적용된다.

이후 TextSpan 안의 TextSpan에 추가적으로 개별적인 Style을 줄 수있다.

 

전체 TextStyle에 fontSize와 color를 주었고, 그 안의 custom이 필요한 텍스트에는 추가적으로 bold를 추가하였다.

                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text.rich(
                      TextSpan(children: [
                        TextSpan(
                          text: "Custom Text",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        TextSpan(
                          text: " Original Text",
                        )
                      ], style: TextStyle(fontSize: 14.0, color: textColor)),
                    ),
                  ),

 

그럼 이렇게 전체 모든 텍스트에는 fontSize와 color가 적용되는데 custom Text부분만 따로 bold가 적용이 된다.