Add WidgetSpan support for TextField/RenderEditable #30688
Comments
HansMuller
added
a: text input
|
cc @GaryQian |
|
Please refer to our (master channel) docs for more info.
|
|
@GaryQian I don't think you've fully understood the issue. |
|
Ahh I see, my bad! I don't think there is a built in way right now, but the building blocks are there, it is a matter of assembling them such that we allow inputting custom |
|
Could you elaborate about the implementation? @GaryQian |
|
So what kind of functionality would you require for this "Rich TextField"? We currently have the InlineSpan tree API that allows you to build a tree of InlineSpan objects that inherit TextStyles. Would the functionality of being able to append independently styled InlineSpans to the contents of the TextField be sufficient? |
|
As I can see from InlineSpan example that it can have multiple |
|
Well since we don't have this explicit capability yet, it would be helpful if you could provide pseudo/fake sample code on how you would like the API to work. There are a couple of ways this could work, one of them being keeping a stack of TextStyles and push/pop methods. Any text inserted through keyboard or through a manual method would then have the style the top TextStyle in the stack. This system would be very similar to our existing ParagraphBuilder works. Other approaches could be either more or less structured, but it would be very helpful to have examples of the kind of code you want to be able to write to achieve what you want. Feel free to make up methods/classes/API! This way, we can add the functionality that would best fit your (and other's uses) |
|
Flutter has a class called Chip. I don't know it is the right question to ask or not, is it possible to insert As flutter don't provide inserting styling by positions like SpannableString so I can think of the pseudo code similar to |
|
Any thoughts on a core rich text plugin similar to CKEditor? |
|
how to get the url/image of GIF in keyboard? I got this message when I try to select a gif. App Name doesn't support image insertion here. |
|
Perhaps this package can help! |
|
extended_text_field Looks promising , I will implement and share my feedback. |
|
We may be able to work with the author of that package to see if we can come up with a reasonable way to integrate some of its core features directly and efficiently into Flutter, as it seems that package accomplishes much of what is being requested here. I'll reach out! For now, the extended_text_field looks like a good solution to achieve the desired effect. |
|
Has there been any progress on this issue? |
|
You can now override the |
|
True. |
GaryQian
changed the title
GaryQian
changed the title
|
I have not been able to get to it yet. If someone has the time, I would be happy to review any PRs for this feature. You should be able to use RenderParagraph's impl as a guide. I'll try my best to get to this eventually, but have higher priority/sensitive issues to tackle at the moment. |
|
Thank you! It would be awesome to have Flutter support this without having to reimplement EditableText and so on, so I'll be happy to help. |
|
@ALL any updates? |
|
Any NEW updates? |
|
@Teio07 it actually should be pretty easy to do by just wrapping part of text into |
|
@MatrixDev I'm not sure I could do it this way since But, then I have no idea how to deal with right side padding... 😕 Edit : I’m not even sure it would work since the next line of the same paragraph would not be affected by the |
|
Hello @GaryQian , |
|
@mordivgor, I really don't think (yet hope) they will implement dynamic/editable spans like |
|
any updates for this? |
|
I will be attempting to land this as two parts:
The core rendering support will land first, which will allow more advanced users to begin modifying their TextEditingControllers to provide to RenderEditable. The second part requires more detailed planning and work. |
|
Core widgetspan support has landed. RenderEditable, and by extension, textfields, can now display WidgetSpans if the TextEditingController outputs WidgetSpans. |
|
Hello! In what version is this api available? I am currently using 2.2.1, i was reading through I wrote this function @override
TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
final atIndex = text.indexOf('@');
var spans = <InlineSpan>[];
if (atIndex != -1) {
spans.add(TextSpan(text: text.substring(0, atIndex)));
spans.add(
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Card(
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text('@'),
),
),
),
);
spans.add(TextSpan(text: text.substring(1 + atIndex)));
} else {
spans.add(TextSpan(text: text));
}
return TextSpan(
children: spans,
);
}What is does, it replaces the I probably dont understand how it should be done, is there any guide or its not available yet? thanks! |
|
Hello @spideythewebhead, I have also rewrote the buildTextSpan method, but as soon as I add a WidgetSpan into the mix: |
|
@GaryQian Hi, any idea for this problem? |
Hi do u mind sharing your code to me for the rich textfield it looks really cool, and i need to implement that |
|
|
|
@jasonhoo95 This particular issue is actually more difficult to solve depending on what you want. Currently, the background color is drawn as part of the text layout and painting, while the selection highlight is drawn separately. We are presented with two options: Draw highlight behind the text (including the bg) or over the text (including bg). For most cases, drawing behind is correct as we want the text to remain readable. However, in this case, the bg just ends up obscuring the highlight. You could try modifying RenderEditable to paint the highlight after the text and playing with the opacity, but it would still obscure the text. Slipping the highlight between the text and the bg is a fairly complex change that modifies the layout engine and I don't think there is enough demand for that capability to justify it as of now. |
|
@GaryQian Hmm but can I ask, in ios native layout engine is possible to set the highlight to overlay above the bg and text am I right? Oo man this is bad, i was really hope to develop an app with rich textfield with flutter, cause flutter it is really easy to use, looks like now is not going to happen, but in the future will u able to fix it with highlight overlay on top bg? |
@Paul-cbt Did you manage to find a solution for this problem? |
I seem to be having this same problem - and most likely for the same reason. I'm using custom widgets for tagged elements in input text but WidgetSpan appears to break TextField because of the dimensions issue. |
|
Any update on this issue? |
Hello @Teio07, can you please share some initial building blocks to build RichTextField with some basic functionality? |
|
Any progress on this issue? |
|
I made a simple example to show that import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final WidgetSpanTextEditingController _controller =
WidgetSpanTextEditingController(
text: 'The quick brown fox jumps over the lazy \uffff dog.');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: TextField(
controller: _controller,
maxLines: null,
),
),
);
}
}
class WidgetSpanTextEditingController extends TextEditingController {
WidgetSpanTextEditingController({String? text})
: super.fromValue(text == null
? TextEditingValue.empty
: TextEditingValue(text: text));
@override
TextSpan buildTextSpan(
{required BuildContext context,
TextStyle? style,
required bool withComposing}) {
TextRange? matchedRange;
if (text.contains('\uffff')) {
matchedRange = _findMatchedRange(text);
}
if (matchedRange != null) {
return TextSpan(
children: [
TextSpan(text: matchedRange.textBefore(text)),
const WidgetSpan(child: FlutterLogo()),
TextSpan(text: matchedRange.textAfter(text)),
],
style: style,
);
}
return TextSpan(text: text, style: style);
}
TextRange _findMatchedRange(String text) {
final RegExp matchPattern = RegExp(RegExp.escape('\uffff'));
late TextRange matchedRange;
for (final Match match in matchPattern.allMatches(text)) {
matchedRange = TextRange(start: match.start, end: match.end);
}
return matchedRange;
}
}
|
Renzo-Olivares
added
the
waiting for customer response
@Renzo-Olivares Screenrecorder-2022-03-18-09-00-36-63.mp4 |
|
@yohom thanks for trying it out. I was able to reproduce your issue on stable as well. It is fixed on the master branch (video below). screen-20220318-130824.mp4I'll close this for now since core support for a WidgetSpan in a TextField/RenderEditable is there. If there are more specific issues with WidgetSpan inside of a TextField I encourage anyone to open a more targeted issue. |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
and others
I don't need a passage editor like Zefyr which has styles like BOLD and ITALIC, what I want is a text field in which I can insert plain text, inline image(faces/emoji), block image, mention symbol(@) and topic symbol(#topic#).
It can be implemented on Android by SpannableString. I hope I can do it on Flutter, too.
So anyone knows how to do this?
The text was updated successfully, but these errors were encountered: