TextOverflow.fade results in unexpected fade direction

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.

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.

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?

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.

Thanks!

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

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 :-)

Document difference between softWrap and maxLine (#139363)

Document difference between softWrap and maxLine (flutter#139363)

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.

Navigation Menu

Repository navigation

TextOverflow.fade results in unexpected fade direction #13631

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextOverflow.fade results in unexpected fade direction #13631

Description

Activity

jason-simmons commented on Dec 20, 2017

mehmetf commented on Dec 22, 2017

Hixie commented on Jan 2, 2018

mehmetf commented on Jan 6, 2018

Hixie commented on Jan 7, 2018

Pavel-Sulimau commented on Aug 18, 2019

jccd1996 commented on Apr 20, 2020

lock commented on May 5, 2020

nt4f04uNd commented on Jun 2, 2023

github-actions commented on Jan 1, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions