Repository navigation
TextOverflow.fade results in unexpected fade direction #13631
Description
import 'package:flutter/material.dart';
void main() {
runApp(new FadeDemo());
}
class FadeDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
var themeData = new ThemeData();
return new MaterialApp(
theme: themeData,
home: new Scaffold(
appBar: new AppBar(title: const Text('Fade Effect')),
body: new Center(
child: new Container(
color: Colors.grey[300],
width: 250.0,
child: new Text(
'This is a short text.',
style: themeData.textTheme.title.copyWith(fontSize: 48.0),
maxLines: 1,
overflow: TextOverflow.fade,
),
),
),
));
}
}results in:
I was expecting it to fade out horizontally. If I set overflow to ellipsis, it works as expected and puts the ellipsis at the end.
If I turn off softwrap, fade works as expected. That's counterintuitive given that I would have expected softwrap to have no effect because of maxLines: 1.
Activity
jason-simmons commentedon Dec 20, 2017
See https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/paragraph.dart#L178
If softWrap is on, then the width constraint is given to the text renderer so it knows where to apply wrapping. The renderer then reports that the text filled the maximum width but would have wrapped to the next line. So the fade effect is then painted at the bottom of the text to signify that the text overflowed its height constraint.
mehmetf commentedon Dec 22, 2017
Perhaps then the problem is our understanding of the parameters for Text.
When we don't want text to wrap (but instead clip) we use
maxLinesparameter, which is a standard Android paradigm. It seems like we should be usingsoftWrap: false?Hixie commentedon Jan 2, 2018
If you don't want text to wrap (except at explicit line breaks), then setting
softWrap: falseonTextwill achieve the effect you want. "maxLines" is more about what to do with the lines once they are wrapped.mehmetf commentedon Jan 6, 2018
Thanks!
Hixie commentedon Jan 7, 2018
I'm going to re-open this bug to make sure the documentation explains this, including screenshots.
Pavel-Sulimau commentedon Aug 18, 2019
jccd1996 commentedon Apr 20, 2020
lock commentedon May 5, 2020
nt4f04uNd commentedon Jun 2, 2023
Seems like this wasn't properly re-opened :-)
Document difference between softWrap and maxLine (#139363)
Document difference between softWrap and maxLine (flutter#139363)
github-actions commentedon Jan 1, 2024
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
flutter doctor -vand a minimal reproduction of the issue.