英文:
flutter Change part of text selected color in textfield
问题
当用户在文本字段中选择文本的一部分并单击颜色按钮时,只有所选文本的部分将被着色。
谢谢
我搜索了所有的文章,但没有找到任何结果。
英文:
I want when the user selects a part of the text in textfield and clicks on the color button, only that part of the selected text will be colored.
Thanks
I searched all the articles but couldn't find any results.
答案1
得分: 1
尼玛贾恩,您需要像下面的代码一样使用rich_text_controller包:
-
首先在您的
pubspec.yaml
文件中添加rich_text_controller: ^1.4.0
(或任何兼容的版本)。
import 'package:flutter/material.dart';
import 'package:rich_text_controller/rich_text_controller.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: RichTextControllerDemo(),
);
}
}
class RichTextControllerDemo extends StatefulWidget {
const RichTextControllerDemo({Key? key});
@override
State<RichTextControllerDemo> createState() => _RichTextControllerDemoState();
}
class _RichTextControllerDemoState extends State<RichTextControllerDemo> {
RichTextController? _controller;
@override
void initState() {
_controller = RichTextController(
stringMatchMap: {
"test": const TextStyle(color: Colors.red),
},
onMatch: (List<String> matches) {
},
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
onChanged: (value) {},
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: InkWell(
child: const Text('click'),
onTap: () {
var start = _controller!.selection.start;
var end = _controller!.selection.end;
var text = _controller!.text.substring(start, end);
setState(() {
_controller!.stringMatchMap!.addAll(
{
text: const TextStyle(color: Colors.cyan),
},
);
});
},
),
),
],
),
),
);
}
}
愉快编码!
英文:
Nima jan Salaam,
you need to use rich_text_controller package like this code below:
- first of all add
rich_text_controller: ^1.4.0
in yourpubspec.yaml
(or any compatible versions).
2)
import 'package:flutter/material.dart';
import 'package:rich_text_controller/rich_text_controller.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: RichTextControllerDemo(),
);
}
}
class RichTextControllerDemo extends StatefulWidget {
const RichTextControllerDemo({super.key});
@override
State<RichTextControllerDemo> createState() => _RichTextControllerDemoState();
}
class _RichTextControllerDemoState extends State<RichTextControllerDemo> {
RichTextController? _controller;
@override
void initState() {
_controller = RichTextController(
stringMatchMap: {
"test": const TextStyle(color: Colors.red),
},
onMatch: (List<String> matches){
}
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller,
onChanged: (value){
},
),
Padding(
padding: const EdgeInsets.only(top : 20.0),
child: InkWell(
child: const Text('click'),
onTap: (){
var start = _controller!.selection.start;
var end = _controller!.selection.end;
var text = _controller!.text.substring(start,end);
setState(() {
_controller!.stringMatchMap!.addAll(
{
text : const TextStyle(color: Colors.cyan),
}
);
});
},
),
)
],
)),
);
}
}
happy coding bro...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论