플러터에서 SelectableText 위젯 사용법 및 옵션 가이드

 

Flutter의 SelectableText 위젯은 사용자가 텍스트를 선택하고 복사할 수 있는 기능을 제공하는 위젯입니다.

일반적인 Text 위젯과는 달리, SelectableText는 텍스트를 선택할 수 있는 UI를 제공하여 사용자 상호작용을 한층 향상시킵니다.

이 블로그 포스트에서는 SelectableText의 기본 사용법과 다양한 옵션을 초보자도 이해할 수 있도록 쉽게 설명하겠습니다.

SelectableText란?

 

SelectableText 위젯은 텍스트를 화면에 표시하면서 사용자가 이 텍스트를 선택하고 복사할 수 있도록 해줍니다.

텍스트를 길게 눌러 선택할 수 있으며, 선택된 텍스트를 클립보드에 복사하거나 다른 작업을 수행할 수 있습니다.

기본 사용법

SelectableText의 기본 사용법은 매우 간단합니다. 다음은 기본적인 SelectableText의 사용 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter SelectableText 예제'),
        ),
        body: Center(
          child: SelectableText(
            '이 텍스트는 선택 가능하며, 복사할 수 있습니다.',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 간단한 SelectableText 위젯을 사용하여 텍스트를 표시합니다. 사용자는 텍스트를 길게 눌러 선택하고 복사할 수 있습니다.

주요 옵션 및 속성

1. style

• 설명: 텍스트의 스타일을 설정합니다. 글꼴, 크기, 색상 등을 지정할 수 있습니다.
• 형식: TextStyle
• 예제

SelectableText(
  '스타일이 적용된 텍스트',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
)

2. textAlign

• 설명: 텍스트의 정렬 방식을 설정합니다.
• 형식: TextAlign
• 예제

SelectableText(
  '가운데 정렬된 텍스트',
  textAlign: TextAlign.center,
)

3. cursorColor

• 설명: 텍스트 선택 시 커서의 색상을 설정합니다.
• 형식: Color
• 예제

SelectableText(
  '커서 색상을 설정한 텍스트',
  cursorColor: Colors.red,
)

4. toolbarOptions

• 설명: 텍스트 선택 시 나타나는 툴바의 옵션을 설정합니다. 복사, 붙여넣기 등 다양한 옵션을 조절할 수 있습니다.
• 형식: ToolbarOptions
• 예제

SelectableText(
  '툴바 옵션을 설정한 텍스트',
  toolbarOptions: ToolbarOptions(copy: true, selectAll: true),
)

5. textScaleFactor

• 설명: 텍스트의 크기를 비율로 조정합니다. 기본값은 1.0입니다.
• 형식: double
• 예제

SelectableText(
  '텍스트 크기를 조정한 예제',
  textScaleFactor: 1.5,
)

6. showCursor

• 설명: 텍스트 입력 시 커서를 표시할지 여부를 설정합니다.
• 형식: bool
• 예제

SelectableText(
  '커서 표시 여부를 설정한 텍스트',
  showCursor: true,
)

7. onSelectionChanged

• 설명: 텍스트 선택 상태가 변경될 때 호출되는 콜백 함수입니다.
• 형식: void Function(TextSelection, SelectionChangedCause?)
• 예제

SelectableText(
  '선택 상태 변경 콜백 예제',
  onSelectionChanged: (selection, cause) {
    print('선택된 텍스트: ${selection.textInside('이 텍스트는 선택 가능하며, 복사할 수 있습니다.')}');
  },
)

8. enableInteractiveSelection

• 설명: 텍스트 선택 기능을 활성화하거나 비활성화합니다.
• 형식: bool
• 예제

SelectableText(
  '텍스트 선택 기능을 비활성화한 예제',
  enableInteractiveSelection: false,
)

결론

SelectableText는 Flutter에서 사용자가 텍스트를 선택하고 복사할 수 있는 기능을 제공하는 강력한 위젯입니다.

다양한 옵션을 통해 텍스트의 스타일, 정렬, 커서 색상 등을 자유롭게 조절할 수 있으며, 사용자 경험을 향상시키는 데 유용합니다.

위의 예제와 옵션을 참고하여 앱에서 텍스트 선택 기능을 효과적으로 활용해 보세요.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱