在文本字段中更改部分文本的选定颜色。

huangapple go评论63阅读模式
英文:

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包:

  1. 首先在您的 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:

  1. first of all add rich_text_controller: ^1.4.0 in your pubspec.yaml (or any compatible versions).

2)

import &#39;package:flutter/material.dart&#39;;
import &#39;package:rich_text_controller/rich_text_controller.dart&#39;;

void main() =&gt; 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&lt;RichTextControllerDemo&gt; createState() =&gt; _RichTextControllerDemoState();
}

class _RichTextControllerDemoState extends State&lt;RichTextControllerDemo&gt; {

  RichTextController? _controller;

  @override
  void initState() {

    _controller = RichTextController(


      stringMatchMap: {
        &quot;test&quot;: const TextStyle(color: Colors.red),
      },

      onMatch: (List&lt;String&gt; 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(&#39;click&#39;),
                  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...

huangapple
  • 本文由 发表于 2023年2月18日 18:07:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/75492576.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定