[플러터] onClick 속성이 가능한 Text 위젯

Text 위젯에서 Click에 따른 이벤트가 필요하다거나,

하나의 Text 라인에서 각 부분들이 다른 TextStyle을 가져야 할때,

RichText라는 위젯을 사용한다.

 

구조가 조금 특이한 위젯이다.

RichText라는 최상단 위젯에 text 속성으로 TextSpan 위젯을 준다.

TextSpan 위젯은 children을 받을 수 있고, 여기에 TextSpan을 여러개 생성해서 넣어준다.

               RichText(
                      text: TextSpan(children: [
                        TextSpan(
                            text: '안녕하세요.',
                            style: TextStyle(color: Colors.black)),
                        TextSpan(
                            text: '저는 ',
                            style: TextStyle(fontWeight: FontWeight.w700)),
                        TextSpan(
                            text: '개발자 뮬리입니다.',
                            //텍스트를 클릭시 이벤트를 발생시키기 위함
                            recognizer: TapGestureRecognizer()
                            //클래스 생성과 동시에 '선언부..함수명'을 입력하면 클래스 변수 없이 함수를 바로 호출 가능함
                              ..onTapDown = (details) {
                              //onTapDown에서 반환되는 값으로 터치한 Screen 위치를 알 수 있다.
                                print(details.globalPosition);
                              },
                            style: TextStyle(color: Colors.red)),
                      ]),
                    ),

 

TextSpan의 recognizer 속성에 위의 예제와 같이 TabGestureRecognizer()를 생성해주면

Text 클릭시 이벤트 발생을 구현할 수 있다.