Text decoration underline is not aligning some characters or space #42833
Comments
|
Share your Text code |
BondarenkoStas
added
a: internationalization
|
It would help if you could provide a small self-contained app that demonstrates the problem. Note also: https://gist.github.com/ is a useful way to share the code. |
HansMuller
added
the
waiting for customer response
|
code sample below |
no-response
bot
removed
the
waiting for customer response
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
1 similar comment
This comment was marked as duplicate.
This comment was marked as duplicate.
|
Won't be helpful to use |
|
On Japanese Android, the following code renders badly styled text... Text(
'会社コード、利用者IDを忘れた方',
style: Theme.of(context).textTheme.body1.copyWith(fontSize: 20, color: Colors.orange, decoration: TextDecoration.underline)
)
|
This comment was marked as duplicate.
This comment was marked as duplicate.
GaryQian
moved this from Awaiting Triage
to Engineer Reviewed
in Mobile - localization & intl
|
In some language de decoration doesn't work as expected. Example: |
Android
iOS
code sampleimport 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
theme: ThemeData.dark(),
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Container(
child: MLinkText('good 早上 have 很好的一天 see you 后来'),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
);
}
}
class MLinkText extends StatelessWidget {
final double fontSize;
final FontWeight fontWeight;
final String text;
final VoidCallback onTap;
final Color color;
final TextAlign textAlign;
MLinkText(this.text,
{this.fontSize = 16,
this.fontWeight = FontWeight.bold,
this.onTap,
this.color = const Color.fromARGB(255, 74, 166, 255),
this.textAlign});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap == null ? () {} : onTap,
child: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: color,
fontSize: fontSize,
fontWeight: fontWeight,
decoration: TextDecoration.underline,
),
textAlign: textAlign,
));
}
}
flutter doctor -v✓] Flutter (Channel master, 1.22.0-10.0.pre.340, on Mac OS X 10.15.6 19G2021 x86_64, locale en-GB)
• Flutter version 1.22.0-10.0.pre.340 at /Users/tahatesser/Code/flutter_master
• Framework revision 1fef5912cf (6 hours ago), 2020-09-23 21:37:08 -0700
• Engine revision dd35b5b659
• Dart version 2.10.0 (build 2.10.0-156.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/tahatesser/Code/sdk
• Platform android-30, build-tools 30.0.2
• ANDROID_HOME = /Users/tahatesser/Code/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.0, Build version 12A7209
• CocoaPods version 1.9.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 49.0.2
• Dart plugin version 193.7547
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] VS Code (version 1.49.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.14.1
[✓] Connected device (5 available)
• Taha’s iPhone (mobile) • 00008020-001059882212002E • ios • iOS 14.0
• iPhone 11 (mobile) • 9A8EFBFE-A806-4FF9-ACA5-F3F98D94979D • ios •
com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.6 19G2021 x86_64
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 85.0.4183.102
• No issues found!
|
TahaTesser
added
a: quality
|
@jason-simmons Does our migration to SkParagraph justify retesting and possibly closing this? |
|
SkParagraph will render the text in #42833 (comment) similarly to Libtxt. The Flutter text API has not changed, and SkParagraph is using the same fonts and many of the same HarfBuzz shaping and Skia text drawing APIs used by Libtxt. |
|
My two cents for short text. Stack(children: [
Text('면책 조항'),
Positioned.fill(
bottom: 3,
child: Container(
decoration: BoxDecoration(border: Border(bottom: BorderSide()))))
]), |
|
@kf6gpe IMO it shouldn't be a P4 as it's directly user facing that makes any app using underlines not really prod ready |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
I did: |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
Is ther any update? It also happened in flutter web 😇 |
|
It seems to be the same issue. #99730 |
|
Any update? same issue 🥲 My codeimport 'package:flutter/material.dart';
class TempScreen extends StatefulWidget {
static const String name = "/TempScreen";
const TempScreen({Key? key}) : super(key: key);
@override
State<TempScreen> createState() => _TempScreenState();
}
class _TempScreenState extends State<TempScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'한글만 이상 합니다',
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: 25,
decorationThickness: 2,
),
),
SizedBox(
height: 100,
),
Text(
'English is good',
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: 25,
decorationThickness: 2,
),
),
],
),
),
),
);
}
}flutter doctor -v |
|
I referred to #42833 (comment). import 'package:flutter/material.dart';
class UnderlineText extends StatelessWidget {
const UnderlineText(
this.text, {
super.key,
this.style,
this.underlineThickness = 1,
this.underlineHeight = 0,
this.underlineColor = Colors.black,
}) : assert(underlineHeight > 0);
final String text;
final TextStyle? style;
final double underlineThickness;
final double underlineHeight;
final Color underlineColor;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Padding(
padding: EdgeInsets.only(bottom: underlineHeight),
child: Text(
text,
style: style,
),
),
Positioned.fill(
bottom: 0,
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: underlineColor,
width: underlineThickness,
),
),
),
),
)
],
);
}
} |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
I can't add custom underline because I have to use textSpan. Hope this solves your problem. |
|
Reproduces on the latest versions of flutter. It reproduced for me on code sampleimport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
theme: ThemeData.dark(),
home: const Home(),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: const Center(
child: MLinkText('good 早上 have 很好的一天 see you 后来'),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {},
),
);
}
}
class MLinkText extends StatelessWidget {
final double fontSize;
final FontWeight fontWeight;
final String text;
final VoidCallback? onTap;
final Color color;
final TextAlign? textAlign;
const MLinkText(this.text,
{super.key,
this.fontSize = 16,
this.fontWeight = FontWeight.bold,
this.onTap,
this.color = const Color.fromARGB(255, 74, 166, 255),
this.textAlign});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: color,
fontSize: fontSize,
fontWeight: fontWeight,
decoration: TextDecoration.underline,
),
textAlign: textAlign,
));
}
}
screenshots
flutter doctor -v |
danagbemava-nc
added
found in release: 3.7
|
Will this solve the problem? |
|
my workaround code 
|
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-engine
|
WidgetSpan textWidgetSpan(String text, double fontSize, double height) { |
|
Let try to use this Widget import 'package:flutter/material.dart'; class UnderlineText extends StatelessWidget { @OverRide List textWidgetSpan(String text) { |
|
`import 'package:flutter/material.dart'; class UnderlineText extends StatelessWidget { @OverRide List textWidgetSpan(String text) { |
and others
Steps to Reproduce
Setting text decoration to underline or overline, the decoration is not aligned in some languages' characters or space. I thought there should be an issue here but didn't find any. Is this considered to be a feature which is intended or it's a bug?
**Target Platform:**Android/iOS
**Target OS version/browser:**any
**Devices:**iPhone, OnePlus phones
The text was updated successfully, but these errors were encountered: