Very new to flutter WidgetTest and could not find a solution to a problem I am having. When dealing with TextSpan objects for WidgetTests, I'm unable to tap on the object.
UI Code
RichText(
text: TextSpan(
text: "First piece of text",
children: [
TextSpan(
text: "Text I want to tap in widget text",
recognizer: TapGestureRecognizer()
..onTap = () {
// go to another page i want to look for a text widget on
}),
],
),
)
WidgetTest code
Future<void> textSpanTap(WidgetTester tester) async {
await tester.pumpWidget(const MaterialApp(home: signInPage));
await tester.tap(find.text("Text I want to tap in widget text"));
}
Any insight on this would help.
Initially I started with the similar question here: Finding a TextSpan to tap on with Flutter tests
.
But the solution from there proved to be non-reliable (worked, but for any configuration).
I ended up using the suggested workaround from here:
https://github.com/flutter/flutter/issues/56023#issuecomment-764985456
Related
Gesture detection in Flutter TextSpan I found this code
import 'package:flutter/gestures.dart';
...
new RichText(
text: new TextSpan(text: 'Non touchable. ', children: [
new TextSpan(
text: 'Tap here.',
recognizer: new TapGestureRecognizer()..onTap = () => print('Tap Here onTap'),
)
]),
);
Why here double dot ".." is used to access onTap and why It's giving error when I use "." (single dot).
Double dots(..) i.e cascade operator
“.. ”is known as cascade notation(allow you to make a sequence of operations on the same object). It allows you to not repeat the same target if you want to call several methods on the same object.This often saves you the step of creating a temporary variable and allows you to write more fluid code.
Normally, we use the below way to define several methods on the same object.
var tapGes = TapGestureRecognizer()
tapGes.onTap = func()
var tapGes = TapGestureRecognizer()
..onTap = func()
...
TextSpan(
text: 'Tap here.',
recognizer: tapGes,
)
...
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
I have an api from which I am fetching messages. These messages might contain emoji.
When it does contain emoji Text Widget is not displaying it correctly.
I just want to display them on the screen. Help if possible.
Thank you :)
class Message{
String text;
Message(){
this.text = get_data_from_api()['text'];
}
}
message = Message();
return Container(
child: Text(message.text),
);
No Displaying text with Emojis on Flutter
won't do it. I can do that but it only works if you have emoji in a string, that is explicitly plasing an emoji in string works fine for me. but when I am using something similar to the code above. I am getting, this
enter image description here
digging more into it I found that if I print my response on console it is
"ðððð"
and if I print a emoji it is 😭
So
I am using
Response.fromStream(await request.send())
from http/http.dart
So is that the problem ?
I did figured it out
I was taking data from an API. So while decoding for some reason it was not decoding utf-8 so what I needed to do was add
utf8.decode(response.bodyBytes);
in place of response.body and it was solved
Reference: Emoji and accent encoding in dart/flutter
If you have an emoji image explicitly present in the response from your API and you want to display it in your text, your should try adding WidgetSpan inside your RichText below is an example of how to do it :
RichText(
text: TextSpan(
children: [
TextSpan(
text: "Click ",
),
WidgetSpan(
child: Icon(Icons.add, size: 14),
),
TextSpan(
text: " to add",
),
],
),
),
In the above example they have used the material icon( Icon(Icons.add)). If you want to replace that from the image your get from the API, you can use ImageIcon instead of Icon widget. Follow this link to know how to use ImageIcon : https://www.woolha.com/tutorials/flutter-using-imageicon-widget-examples
Reference : Add image to RichText element
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(),
],
),
);
For example, I may have one RichText in current widget tree, that looks like
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)
I try to use find.text('Hello bold world!') but it doesn't work because it's not a Text.
Framework solution
I have recently contributed this feature to the Flutter framework, i.e. to the built-in finders.
find.text()
You can now enable a findRichText parameter, which will then also find standalone RichText widgets:
find.text(
'Hello bold world!',
findRichText: true,
)
Simplest solution is to put a key on the RichText and read it that way.
If that's not a good fit for whatever reason, you can use find.byWidgetPredicate and pass a function that matches RichText widgets whose text.toPlainText() returns the string you want.
Here's the find.byWidgetPredicate call.
find.byWidgetPredicate((widget) => fromRichTextToPlainText(widget) == 'Hello bold world!')
Here's the fromRichTextToPlainText helper function. Pass it the RichText widget, it will return the plain text.
String fromRichTextToPlainText(final Widget widget) {
if (widget is RichText) {
if (widget.text is TextSpan) {
final buffer = StringBuffer();
(widget.text as TextSpan).computeToPlainText(buffer);
return buffer.toString();
}
}
return null;
}
I solved for this by digging into the widget a bit more manually
final richTextWidget = tester.element(richTextFinder).widget as RichText;
print(richTextWidget.text.children);
With the children, I can assert they are generated as expected