如何在 textformfield 上更改主题标签 flutter 的颜色？

Question

i want to change the input text color when i include hashtags(#) without changing the other texts colors that doesn't include hashtag

    TextFormField(
                                        minLines: 1,
                                        maxLines:
                                            5, // allow user to enter 5 line in textfield
                                        keyboardType: TextInputType
                                            .multiline, // user keyboard will have a button to move cursor to next line

                                        controller:
                                            postController.captionController,

                                        decoration: const InputDecoration.collapsed(
                                          hintText: 'caption',
                                          hintStyle: TextStyle(    
                                                                                    fontSize: 15,
)
                                          
                                        ),
                                        style: const TextStyle(
                                            color: Colors.black,
                                            fontSize: 18,
                                            fontWeight: FontWeight.bold),
                                        validator: (value) {
                                          return postController
                                              .validateCaption(value!);
                                        },
                                      ),

Answer 1

I was able to implement this feature by using rich_text_controller package.

Here is my example:

class AppContent extends StatefulWidget {
  const AppContent({Key? key}) : super(key: key);

  @override
  _AppContentState createState() => _AppContentState();
}

class _AppContentState extends State<AppContent> {
  // Add a controller
  late RichTextController _controller;

  @override
  void initState() {
    _controller = RichTextController(
      patternMatchMap: {
        RegExp(r"\B#[a-zA-Z0-9]+\b"): TextStyle(color: Colors.cyan),
      },
      onMatch: (List<String> matches) {
        // Do something with matches.
      },
      deleteOnBack: true,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
        )
      ],
    );
  }
}

Answer 2

You can use the.contains() method like this:

String myString = "#Text";
bool hasHash = myString.contains('#'); // yields true

Then in your TextStyle() use a ternary expression:

TextStyle(color:hasHash ? Colors.green : Colors.red;)

Now apply this to your input controller. See this link from the Flutter cookbock. Here is the short form, I recommend to follow the steps from the docs step by step though:

1. Create controller: final myController = TextEditingController();
2. Add it to field in form: TextField(controller: myController);
3. Retrieve the current value: myController.text
4. Use the logic above: bool hasHash = myController.text.contains('#')
5. Output color dynamically: TextStyle( color:hasHash? Colors.green: Colors.red;