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!);
},
),
CodePudding user response:
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,
)
],
);
}
}
CodePudding user response:
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:
- Create controller:
final myController = TextEditingController();
- Add it to field in form:
TextField(controller: myController);
- Retrieve the current value:
myController.text
- Use the logic above:
bool hasHash = myController.text.contains('#')
- Output color dynamically:
TextStyle( color:hasHash ? Colors.green : Colors.red;