Flutter에서 Text 드래그/복사 가능하게 하기 (SelectableText)

 

우리는 때때로 스마트폰에서 화면의 글을 꾸욱 눌러서 선택하여 공유하곤 한다.

혹은 웹상에서 마우스로 글을 긁어서(Drag) 선택된 글을 복사하기도 한다.

 

그런데 플러터(Flutter) 에서 일반적으로 글자를 나타내는 위젯인 Text는 선택이 되지 않는 이슈가 있다.

 

이런 상황에 대체해서 사용할 수 있는 위젯이 있다.

SelectableText 위젯이 바로 그 대상이다.

 

기본적인 사용법은 Text 위젯과 굉장히 흡사하다.

const SelectableText(
  '이 글은 선택이 됩니다!',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.w600),
)

 

또한 RichText 위젯처럼 다른 모양의 텍스트를 섞고 싶다면 아래와 같은 방식을 활용할 수 있다.

const SelectableText.rich(
    TextSpan(
      text: '이런식으로',
      children: <TextSpan>[
        TextSpan(
          text: '다른 스타일의 ',
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
        TextSpan(
          text: '글을 적을 수 있다!',
          style: TextStyle(
            fontStyle: FontStyle.italic,
          ),
        ),
      ],
    ),

 

그 외에도 다양한 Properties를 통해 여러가지로 꾸밀 수 있다.

가령 커서를 조정하고 싶다면 아래의 속성들을 활용할 수 있다.

cursorColor
선택 모드에서 커서의 색상 설정 기능

cursorWidth
커서 너비 지정 기능

cursorRadius
커서 모서리 곡률 설정 기능

cursorHeight
커서 높이값 설정

showCursor
커서 노출 여부

 

공식 문서는 아래를 클릭하자.

https://api.flutter.dev/flutter/material/SelectableText-class.html

 

<플러터 패키지명 변경하기>

플러터(Flutter)에서 Android Package 이름 설정