How to animate TextSpans within Flutter TextFormField - flutter

I am currently working on a project that requires minor animations to text as it appears in a TextFormField.
I hav extended the TextEditingControler and overriden the buildTextSpan function to enable different TextSyles based on the types of words that were being typed in. For example if a word is ['the','a','me'].
For example I would add a TextSpan with a particular style for each matching word and for all other words I would just add the word in a TextSpan with normal style.
This is working fine, however, what I want to do is to animate the matched words for a period as they are entered, for example they would turn from blue to green.
Extended TextEditingController Class
class RichTextEditingController extends TextEditingController {
TextStyle matchedStyle = TextStyle(
color: Colors.green,
fontSize: 20,
fontWeight: FontWeight.w700,
);
#override
TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
List<String> wordsToMatchList = ['the','a','me'];
List<String> splitText = text.split(' ');
List<TextSpan> textSpanList = [];
splitText.forEach((word) {
if (wordsToMatchList.contains(word)) {
textSpanList.add(TextSpan(style: boldStyle, text: '$word'));
} else {
textSpanList.add(TextSpan(style: style, text: '$word'));
}
});
return TextSpan(children: textSpanList);
}
}
I have tried various techniques like future.Delayed and others, but can't seem to find any approach that works and need some help.
Question: Is there a way to add a minor animation to TextSpans or other widgets that would show when new text is typed into a text field that matches a certain pattern?

Related

Text widget cannot read html tags Flutter

Text widget in Flutter dose not support a special charterers like &, where sometimes this charterer comes like "first & second" from the database, or "&quot" should be ".
Text widget should read/convert these characters automatically. I have already fixed by following lines, But I need to put this solution in all Text widgets I have in my app.
Is it possible to give all Text widgets the possibility to read these special charterers directly in main function in runAPP or "MaterialApp" without putting the following lines in all Text widgets the app has?
final document = parse(htmlString);
final String parsedString = parse(document.body.text).documentElement.text;
Use this package flutter_html and try as follows:
Html(data: htmlString, style: {
"body": Style(
fontSize: FontSize(18),
color: Colors.black,
fontWeight: FontWeight.normal)
}),

How to hide password ENTIRELY in flutter [duplicate]

This question already has answers here:
Flutter: obscureText, how to stop showing typed characters
(2 answers)
Closed last year.
I was searching a lot on the internet about how to hide password in TextFormField, the entirely one. Because obscureText doesn't hide all of it, they give a slightly every character you typed
screenshot
Is there any solution for this? Thx in advance
You need it on Android and iOs, right? Because on other platforms seems to be implemented by default like you want it.
In any case, try this:
class ObscuringTextEditingController extends TextEditingController {
ObscuringTextEditingController(String text) : super(text: text);
#override
TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
var displayValue = '•' * value.text.length;
if (!value.composing.isValid || !withComposing) {
return TextSpan(style: style, text: displayValue);
}
final TextStyle composingStyle = style?.merge(
const TextStyle(decoration: TextDecoration.underline),
) ??
const TextStyle(decoration: TextDecoration.underline);
return TextSpan(
style: style,
children: <TextSpan>[
TextSpan(text: value.composing.textBefore(displayValue)),
TextSpan(
style: composingStyle,
text: value.composing.textInside(displayValue),
),
TextSpan(text: value.composing.textAfter(displayValue)),
],
);
}
}
Updated the original code from here

Colorize only a part of a TextForm text

I was wondering if there was a way to customize a TextFormField with more accuracy. I don't want to change the whole text color, but only part of it. For instance, below is the above mention TextFormField and I want to highlight "には" (ie what is between curly braces) by adding a red color. I would like to avoid creating multiple TextFormFields to do this because it will be a mess to assemble the text afterwards but I don't know if it is possible.
WARNING
I am not looking for the RichText widget since I want to customize a TextFormField Widget or any Widget with an editable text.
This Widget is used in a List so I would like not to use a "preview" widget with my input widget.
AND
I don't need a full RichTextEditor since the User should not be able to modify the color. Only parts between curly braces should automatically be colorised.
Looking forwards to see what kind of solutions you guys could come up with !
I've finally found a gist that match my request. For those who are searching an answer to my question, you seems to have to override EditableText (How to change color of particular text in a text field dynamically?). But, it's only a draft and it is not working correctly as for today. I'll try to follow this path and add my answer on this post.
EDIT:
The only thing you have to change to this answer is the following:
#override
TextSpan buildTextSpan() {
final String text = textEditingValue.text;
int textLength = text.length;
if (widget.annotations != null && textLength > 0) {
var items = getRanges();
var children = <TextSpan>[];
for (var item in items) {
if (item.range.end < textLength) {
children.add(
TextSpan(style: item.style, text: item.range.textInside(text)),
);
} else if (item.range.start <= textLength) {
children.add(
TextSpan(
style: item.style,
text: TextRange(start: item.range.start, end: text.length)
.textInside(text)),
);
}
}
return new TextSpan(style: widget.style, children: children);
}
return new TextSpan(style: widget.style, text: text);
}
}
Explanation:
You simply have to correct the buildTextSpan part. The error was raised when you delete a character because the Range could raise an exception when the range end was not meet.
This might not be exactly what you want, but may be this can help you get started in a way.
Use RichText widget.
var text = new RichText(
text: new TextSpan(
style: new TextStyle(
fontSize: 10.0,
),
children: <TextSpan>[
new TextSpan(text: 'Text1'),
new TextSpan(text: 'Text2', style: new TextStyle(),
],
),
);

check if text Widget has style

I am trying to add a default style to a Text Widget, but I need to be able to overwrite it.
this is what I am trying right now.
var newTitle = title;
if (title is Text) {
Text titleText = title as Text;
newTitle = Text(titleText.data, style: TextStyle == null ? TextStyle() : TextStyle(fontWeight: FontWeight.bold));
}
So I want to check if it has style if not add the default style to it, otherwise use overwriten
Flutter provides a simple way to do this by providing a DefaultTextStyle widget, which can be used to specify a default texty style for the subtree. If a child Text widget already defines a style, the specific Text style will be used.
DefaultTextStyle(
child: title,
style: TextStyle(fontWeight: FontWeight.bold),
),

Flutter editable text on canvas

I am trying to add an editable textbox to the canvas in Flutter, that will bring up the keyboard once selected.
I am using a custom painter to print text to a canvas (shown in the code below). Is it possible to make this text editable, or add a text input element over the canvas at a particular offset?
import 'package:flutter/material.dart' as Material;
class CanvasPainter extends Material.ChangeNotifier implements Material.CustomPainter {
..
void paint(Canvas canvas, Size size) {
Material.TextSpan textSpan = new Material.TextSpan(style: new material.TextStyle(color: new Maaterial.Color.fromRGBO(r, g, b, 1.0), fontSize: font.fontSize.toDouble(), fontFamily: 'Roboto'),text: "Hello there");
Material.TextPainter tp = new Material.TextPainter( text: textSpan, textAlign: TextAlign.left, textDirection: TextDirection.ltr, textScaleFactor: ratio);
tp.layout();
tp.paint(canvas, new Offset(50.0,50.0));
}
}
Not the best solution, but I could solve similar issue with OverlayEntry.
Steps:
create an OverlayEntry, put a (hidden) TextField into it with a FocusNode and TextEditController.
after added the overlay entry, request focus on the focusNode, so the keyboard will open.
Add an onChanged to the TextField, and notify the painter somehow (e.g. valueNotifier) on text change.
In the TextPainer use the TextEditController.text value