Несмотря на то, что во flutter доступно множество интересных вещей, разработчики часто сталкиваются со специфическими проблемами, связанными с этой платформой. Одной из распространенных проблем во Flutter является невозможность копирования текстового содержимого. По умолчанию пользователи не могут копировать текстовое содержимое приложения flutter. Но иногда пользователи хотят скопировать текстовое содержимое в буфер обмена. В этом случае на помощь приходит текстовый виджет.
Он позволяет пользователям отображать текст в приложении flutter. Он также используется для демонстрации назначения компонента в мобильном приложении. При длительном нажатии на текстовый виджет появляется всплывающая подсказка с копией. После нажатия на копию содержимое текста будет скопировано в системный буфер обмена. Продолжайте читать, чтобы узнать, как сделать копируемый текстовый виджет в flutter.
Что такое текстовый виджет в flutter?
Текстовый виджет — один из самых распространенных виджетов в flutter. Вам необходимо использовать текстовый виджет, когда вы хотите отображать текст в приложениях flutter. Используя этот виджет, вы можете отображать текст в одну или несколько строк.
Он также помогает настроить текст с помощью различных свойств, таких как размер шрифта, вес шрифта, цвет и многое другое. Вот код, используемый для настройки виджета с различными свойствами. У вас есть еще одна возможность получить индивидуальное решение в разработке приложений Flutter, наняв разработчиков Flutter из Bosc Tech.
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, copy, paste и cut. Вот как выглядит фрагмент кода!
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")),
),
]),
);
}
Создание копируемого текста во flutter с помощью класса SelectableText
Очень просто создать копируемый текст во флаттере с помощью класса SelectableText. Вот код, который необходимо выполнить!
const SelectableText(
'This is a copyable text...',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
Пример копируемого текста во флаттере
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 и помогут вам добиться желаемого результата.