Flutter에서 복사 가능한 텍스트 위젯을 만드는 방법은 무엇입니까?

Flutter에서 많은 흥미로운 기능을 사용할 수 있지만 개발자는 종종 이 플랫폼에서 특정 문제에 직면합니다. Flutter의 일반적인 문제 중 하나는 텍스트 콘텐츠를 복사할 수 없다는 것입니다. 기본적으로 사용자는 Flutter 앱의 텍스트 콘텐츠를 복사할 수 없습니다. 그러나 때때로 사용자는 텍스트 콘텐츠를 클립보드에 복사하기를 원합니다. 텍스트 위젯이 들어오는 곳입니다.

이를 통해 사용자는 Flutter 애플리케이션에 텍스트를 표시할 수 있습니다. 또한 모바일 앱에서 구성 요소의 목적을 보여주기 위해 사용됩니다. 텍스트 위젯을 길게 탭하면 툴팁이 사본과 함께 표시됩니다. 사본을 클릭하면 텍스트 내용이 시스템 클립보드에 복사됩니다. Flutter에서 복사 가능한 텍스트 위젯을 만드는 방법을 알아보려면 계속 읽으세요.

Flutter의 텍스트 위젯이란 무엇인가요?
텍스트 위젯은 Flutter에서 가장 널리 액세스되는 위젯 중 하나입니다. Flutter 애플리케이션에서 텍스트를 표시하려면 텍스트 위젯을 사용해야 합니다. 이 위젯을 사용하면 텍스트를 한 줄 또는 여러 줄로 표시할 수도 있습니다.

또한 글꼴 크기, 글꼴 두께, 색상 등과 같은 다양한 속성으로 텍스트를 사용자 지정하는 데 도움이 됩니다. 다음은 다양한 속성으로 위젯을 사용자 지정하는 데 사용되는 코드입니다. Bosc Tech에서 Flutter 개발자를 고용하여 Flutter 앱 개발에서 맞춤형 솔루션을 얻을 수 있는 또 다른 옵션이 있습니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
 runApp(MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
         appBarTheme: const AppBarTheme(
       color: Colors.orange,
     )),
     debugShowCheckedModeBanner: false,
     home: const FlutterTextWidget(),
   );
 }
}

Flutter에서 복사 가능한 텍스트 위젯 만들기 가이드

Flutter 1.9에서 동일한 위젯이 출시되었으므로 SelectableText에서 속성 목록을 찾을 수 있습니다. selectAll, 복사, 붙여넣기 및 잘라내기 옵션을 활성화합니다. 코드 조각은 다음과 같습니다!

SelectableText("Lorem ipsum...")

텍스트를 선택할 때마다 컨텍스트 복사 버튼이 나타나 출력을 렌더링합니다. 컨텍스트 복사 버튼이 표시되지 않는 것이 걱정된다면 SnackBar Widget을 사용할 수 있습니다. 사본에 대해 사용자에게 알립니다. 다음은 코드 조각입니다!

final String _copy = "long press to copy";
@override
Widget build(BuildContext context) {
 return Scaffold(
   key: key,
   appBar: AppBar(
     title: const Text("Copy"),
     centerTitle: true,
   ),
   body: Column(mainAxisAlignment: MainAxisAlignment.center, children: < Widget>[
     const SelectableText.rich(
       TextSpan(
         children: [
           TextSpan(text: "Copy me", style: TextStyle(color: Colors.red)),
           TextSpan(text: " and leave me"),
         ],
       ),
     ),
     const SizedBox(
       height: 20,
     ),
     const SelectableText(
       'Hello Flutter Developer',
       cursorColor: Colors.red,
       showCursor: true,
       toolbarOptions: ToolbarOptions(
           copy: true, selectAll: true, cut: false, paste: false),
     ),
     const SizedBox(
       height: 20,
     ),
     const SelectableText(
       'This is a copyable text...',
       textAlign: TextAlign.center,
       style: TextStyle(fontWeight: FontWeight.bold),
     ),
     const SizedBox(
       height: 20,
     ),
     GestureDetector(
       child: Text(_copy),
       onLongPress: () {
         Clipboard.setData(ClipboardData(text: _copy));
         key.currentState?.showSnackBar(const SnackBar(
           content: Text("Copied to Clipboard"),
         ));
       },
     ),
     const SizedBox(
       height: 20,
     ),
     const Padding(
       padding: EdgeInsets.symmetric(horizontal: 10),
       child: TextField(decoration: InputDecoration(hintText: "Paste Here")),
     ),
   ]),
 );
}

SelectableText 클래스를 사용하여 Flutter에서 복사 가능한 텍스트 만들기
SelectableText 클래스의 도움으로 플러터에서 복사 가능한 텍스트를 만드는 것은 매우 쉽습니다. 따라야 할 코드는 다음과 같습니다!

const SelectableText(
 'This is a copyable text...',
 textAlign: TextAlign.center,
 style: TextStyle(fontWeight: FontWeight.bold),
),

flutter에서 복사 가능한 텍스트의 예

import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Copyable Text Example',
      home: FlutterExample(),
    );
  }
}
class FlutterExample extends StatelessWidget {
  const FlutterExample({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Copyable Text Example')),
      body: Center(child: SelectableText('You can copy me!'),)
    );
  }
}

SelectableText를 사용하여 속성 목록 활성화 – 복사, 붙여넣기, 잘라내기 및 모두 선택

child: Center(
            child: SelectableText('Hello Flutter Developer',
                cursorColor: Colors.red,
                showCursor: true,
                toolbarOptions: ToolbarOptions(
                copy: true,
                selectAll: true,
                cut: false,
                paste: false
                ),
                style: Theme.of(context).textTheme.body2)
            ),

TextWidget에 대해 다른 스타일을 지정하려면 이 코드를 사용할 수 있습니다.

SelectableText.rich(
  TextSpan(
    children: [
      TextSpan(text: "Copy me", style: TextStyle(color: Colors.red)),
      TextSpan(text: " and leave me"),
    ],
  ),
)

산출

결론

이제 Flutter에서 복사 가능한 텍스트 위젯을 만드는 방법을 이해할 것입니다. 여전히 Flutter 개발에 대한 지원이 필요하다면 주저 없이 Flutter 개발자를 고용하세요. 경험이 풍부하고 숙련된 Flutter는 Flutter 프로젝트 개발에 충분한 도움을 줄 것입니다. 그들은 Flutter의 놀라운 리소스를 사용하고 원하는 결과를 얻을 수 있도록 도와줍니다.