bdlukaa / rounded_background_text Goto Github PK
View Code? Open in Web Editor NEWText and TextField highlighted with rounded corners
Home Page: https://bdlukaa.github.io/rounded_background_text/
License: BSD 3-Clause "New" or "Revised" License
Text and TextField highlighted with rounded corners
Home Page: https://bdlukaa.github.io/rounded_background_text/
License: BSD 3-Clause "New" or "Revised" License
Describe the bug
When using the highlight widget with a non-latin text, the highlight is misplaced. When the non-latin text is mixed with the Latin text, the highlight goes crazy to different points.
Additional context
This happens with Hebrew, Korean, Japanese, Chinese, Thai, Arabic. With the Cyrillic alphabet, it works as fine as the Latin alphabet.
This only happens with the canvas-kit renderer. The html renderer works fine.
Hello, I'm using your package and I find it really helpful but I'm facing a small issue where if I dismiss the keyboard without adding any text to rounded background text field, I'm unable to tap the text field nor cursor to call back the keyboard unless it contains text.
Simply put it as if the text field is empty on tap is unable to call keyboard unless the text field contains any form of text
Is your feature request related to a problem? Please describe.
The hit area of the widget is currently suboptimal. The problem occurs when there is text with multiple blank lines in between. In this situation, the widget will continue to respond to hit events even if the user taps in those blank spaces. In the image below, you can see the region that is mistakenly identified as a hit target colored green. In my opinion, the widget should only detect a hit event when the user taps on the text with the background, which is below colored in amber.
Describe the solution you'd like
We should override the hitTest
method of the CustomPainter
inside the RoundedBackgroundTextPainter
class. Below is a simple example of how to do this.
@override
bool? hitTest(Offset position) {
// Retrieve the line information
final lineInfos = computeLines(text);
// Check each line
for (final lineInfo in lineInfos) {
for (final info in lineInfo) {
// Construct the rounded rectangle for this line
final rRect = RRect.fromLTRBR(
info.x,
info.y,
info.fullWidth,
info.fullHeight,
Radius.circular(info.outerRadius(outerRadius)),
);
// Check if the position is within this rectangle
if (rRect.contains(position)) {
onHitTestResult(true); // Call method with the result for external handling
return true;
}
}
}
// If the position was not within any line's bounding box
onHitTestResult(false); // Call method with the result for external handling
return false;
}
This example is simple and will not perfectly detect any inner rounding. It will also not detect the surrounding padding.
Maybe you have a better solution, but I think for most cases this simple hit detection will be enough. For me it will also be useful if it always calls a method like onHitTestResult
which returns if the hitTest is true or false. This is helpful for applications that have more complex logic with many layers. So in the end the widget will look like this then.
RoundedBackgroundText(
'Text',
onHitTestResult: (hit) {
/// Handle hit
},
backgroundColor: Colors.amber,
),
Is your feature request related to a problem? Please describe.
I am trying to place this widget in a positioned widget.And i want to set the 'left:' parameter to screenWidth - RoundedBackgroundText.width
Describe the solution you'd like
I there is a size parameter available then it would be easy for me to position this widget where i wanted.
Additional context
Is there any other way to accomplish my requirement with current version?
Describe the bug
It looks like there is a difference in the line spacing and letter spacing between the regular text and the selectable text.
To Reproduce
Steps to reproduce the behavior:
Selectable Text
option.Expected behavior
Both text elements should render at the same position with consistent line height and letter spacing.
Additional context
We've previously mentioned this issue in another thread and provided a workaround by using RoundedBackgroundTextField
with readOnly: true
.
I didn't look into this closely, but it didn't work.
The following assertion was thrown building
js_primitives.dart:30 _OverlayEntryWidget-[LabeledGlobalKey<_OverlayEntryWidgetState>#1c2cf](dirty, state:
js_primitives.dart:30 _OverlayEntryWidgetState#d6b7f):
js_primitives.dart:30 The _RenderLayoutBuilder class does not support dry layout.
js_primitives.dart:30 Calculating the dry layout would require running the layout callback speculatively, which might
js_primitives.dart:30 mutate the live render object tree.
Describe the bug
When typing a space (" "
) a background doesn't get added. When breaking the line twice and then typing again, you can create ONE single text element with TWO different backgrounds. This isn't very confusing for the user when he suddenly drags two elements while expecting to drag only one.
To Reproduce
Steps to reproduce the behavior:
RoundedBackgroundTextField
(make sure to set keyboardType: TextInputType.multiline,
)Expected behavior
Generally having the space character (" "
) rendered.
Hi friends,
Thanks for your great package I got an issue after upgrading to flutter 3.0, the text floating down from the background :( can you please help me fix this issue? Thanks in advance!
My widget:
Positioned( left: 15, top: 10, child: Container( alignment: Alignment.center, //decoration: , width: 150, height: 40, color: Colors.transparent, child: RoundedBackgroundText( 'TEXT ' , style: const TextStyle( fontSize: 16, fontWeight: FontWeight.w900), backgroundColor: Colors.orangeAccent .withOpacity(0.9), textAlign: TextAlign.center, maxLines: 1, innerRadius: 1.0, outerRadius: 6.0, // textHeightBehavior: // const TextHeightBehavior( // applyHeightToFirstAscent: false, // applyHeightToLastDescent: false, // leadingDistribution: // TextLeadingDistribution // .even, // ), ),
Describe the bug
The bug I've encountered is that the text within the painted content is not vertically aligned to the center.
To Reproduce
Create a widget with a large font size like below. Then use the Flutter Widget Inspector and tap on the text. This way you can see it clearly.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey.shade500,
body: Center(
child: RoundedBackgroundText(
'Hello World',
backgroundColor: Colors.white,
style: const TextStyle(fontSize: 48),
),
),
);
}
Expected behavior
I expected the text inside the painted content to be vertically aligned at the center.
Additional context
I think a potential improvement is to update the y-position for the first line. However, I'm not sure if this is the optimal approach.
double get y {
final y = metrics.baseline - metrics.ascent;
if (isFirst) {
// Replace => return y;
return (height - metrics.height -_lastLinePadding.bottom)/2;
} else if (isLast) {
return y + (_lastLinePadding.top / 2);
} else {
return y - _innerLinePadding.top;
}
}
Is your feature request related to a problem? Please describe.
I have an application that does not need the option to resize the font size when typing. I have an extra option for the user to do this.
Describe the solution you'd like
I would love to have a parameter, where I simply can disable this feature. Like autoResize: false
. In the best case, it simply prohibits adding more in the text field, when the max limit is reached.
Describe alternatives you've considered
Alternatively, I could also imagine something like in the Text
widget, where there is a parameter for overflow (overflow: TextOverflow.fade
).
Additional context
This is a fundamental problem, that needs to be solved. The usage of this plugin is otherwise critical or not possible.
Describe the bug
I am kind of puzzled how the new version was able to get released. I see no option to handle this widget as before.
And I also seem to use a specific size as a parent, which is a kind of contra-production if the goal is to have a dynamic size text field?!
To Reproduce
Run the code below and try to center the widget.
(Keeps being stuck at the top-left corner)
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: RoundedBackgroundTextField(
autofocus: true,
keyboardType: TextInputType.multiline,
enableInteractiveSelection: true,
controller: controller,
),
);
}
Expected behavior
Being able to move and handle the widget like the normal Text() widget or any other normal widget.
I am now using version 0.1.3 because every newer one is not functional at all. Please fix
After using "\n" newline character in the text, the text cannot be displayed.
@bdlukaa
Describe the bug
When using Thai characters, sometimes the text appears partly outside its background.
Tested both on Android and web
Is there any workaround?
To Reproduce
Steps to reproduce the behavior:
RoundedBackgroundText('ที่', style: TextStyle(fontFamily: 'Sarabun', fontSize: 26), backgroundColor: Colors.amber)
Expected behavior
Text should appear inside its background
Additional context
Fonts folder:
https://www.arnirichard.dk/fonts.zip
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 3.1.0-0.0.pre.2268, on Microsoft Windows [Version 10.0.22000.856], locale en-GB)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.6)
[√] Android Studio (version 2021.2)
[√] Connected device (4 available)
[√] HTTP Host Availability
• No issues found!
Is your feature request related to a problem? Please describe.
Scaling the text down doesn't work properly!
Describe the solution you'd like
Scrollable text field
Describe alternatives you've considered
N/A
Additional context
N/A
Describe the bug
The hint parameter is not built.
To Reproduce
Steps to reproduce the behavior:
RoundedBackgroundTextField
hint: "text"
Expected behavior
A lighter-colored placeholder hint that appears on the first line of the text field when the text entry is empty.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.