8000 TextOverflow.fade results in unexpected fade direction · Issue #13631 · flutter/flutter · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

TextOverflow.fade results in unexpected fade direction #13631

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
mehmetf opened this issue Dec 16, 2017 · 10 comments · Fixed by #139363
Closed

TextOverflow.fade results in unexpected fade direction #13631

mehmetf opened this issue Dec 16, 2017 · 10 comments · Fixed by #139363
Labels
d: api docs Issues with https://api.flutter.dev/ framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-framework Owned by Framework team triaged-framework Triaged by Framework team

Comments

@mehmetf
Copy link
Contributor
mehmetf commented Dec 16, 2017 
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:

image

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.
@jason-simmons
Copy link
Member

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
Copy link
Contributor Author
mehmetf commented Dec 22, 2017
8000

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 maxLines parameter, which is a standard Android paradigm. It seems like we should be using softWrap: false?

@Hixie
Copy link
Contributor
Hixie commented Jan 2, 2018

If you don't want text to wrap (except at explicit line breaks), then setting softWrap: false on Text will achieve the effect you want. "maxLines" is more about what to do with the lines once they are wrapped.

@mehmetf
Copy link
Contributor Author
mehmetf commented Jan 6, 2018

Thanks!

@mehmetf mehmetf closed this as completed Jan 6, 2018
@Hixie
Copy link
Contributor
Hixie commented Jan 7, 2018

I'm going to re-open this bug to make sure the documentation explains this, including screenshots.

@Hixie Hixie added the d: api docs Issues with https://api.flutter.dev/ label Jan 7, 2018
8000 @Hixie Hixie added this to the 4: Next milestone milestone Jan 7, 2018
@Pavel-Sulimau

This comment was marked as off-topic.

Sign in to view
@jccd1996

This comment was marked as off-topic.

Sign in to view
@lock

This comment was marked as resolved.

Sign in to view
@lock lock bot locked and limited conversation to collaborators May 5, 2020
@nt4f04uNd nt4f04uNd mentioned this issue May 28, 2021
Closed
@nt4f04uNd
Copy link
Member

I'm going to re-open this bug to make sure the documentation explains this, including screenshots.

Seems like this wasn't properly re-opened :-)

@nt4f04uNd nt4f04uNd reopened this Jun 2, 2023
@flutter flutter unlocked this conversation Jun 2, 2023
@nt4f04uNd nt4f04uNd mentioned this issue Jun 2, 2023
Open
2 tasks
@darshankawar darshankawar added framework flutter/packages/flutter repository. See also f: labels. team-framework Owned by Framework team labels Jul 18, 2023
@goderbauer goderbauer added P2 Important issues not at the top of the work list triaged-framework Triaged by Framework team labels Jul 18, 2023
@M0rica M0rica mentioned this issue Oct 6, 2023
Open
@paldepind paldepind mentioned this issue Dec 1, 2023
Merged
auto-submit bot pushed a commit that referenced this issue Dec 18, 2023
@paldepind
Document difference between softWrap and maxLine (#139363)
b893884 
This PR fixes #13631 through documentation as suggested in #13631 (comment).

Since the documentation additions rely on new screenshots this PR will be accompanied by a PR in the assets repository.
CoderDake pushed a commit to CoderDake/flutter that referenced this issue Dec 28, 2023
@paldepind @CoderDake
Document difference between softWrap and maxLine (flutter#139363)
2ba1e97 
This PR fixes flutter#13631 through documentation as suggested in flutter#13631 (comment).

Since the documentation additions rely on new screenshots this PR will be accompanied by a PR in the assets repository.
@github-actions GitHub Actions
Copy link
github-actions bot commented 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 -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 1, 2024
@darshankawar darshankawar added the r: fixed Issue is closed as already fixed in a newer version label Feb 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
d: api docs Issues with https://api.flutter.dev/ framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-framework Owned by Framework team triaged-framework Triaged by Framework team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Document difference between softWrap and maxLine paldepind/flutter
8 participants
@Hixie @goderbauer @mehmetf @Pavel-Sulimau @jason-simmons @nt4f04uNd @jccd1996 @darshankawar
0