Text widget doesn't change it's size when line break happened

Same problem from android, there I override onMeasure to change Text widget size when line break happened.

Here is code

    return Column(
        crossAxisAlignment: me ? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.teal,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(15.0),
                topLeft: Radius.circular(15.0),
                bottomLeft: me ? Radius.circular(15.0) : Radius.circular(0.0),
                bottomRight: me ? Radius.circular(0.0) : Radius.circular(15.0),
              )
            ),
            child: Text(message),
          ),
        ],
      );
  }

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale ru-RU)
    • Flutter version 1.0.0 at /Users/daniel/crossplatform/flutter
    • Framework revision 5391447fae (7 weeks ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/daniel/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 31.3.1
    • Dart plugin version 181.5656
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] Connected device (1 available)
    • iPhone XR • 0ED8A7F1-CE8A-4026-820D-1763AF319C68 • ios • iOS 12.1 (simulator)

! Doctor found issues in 2 categories.

Sounds like https://stackoverflow.com/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli/51205467#51205467

~~Looks like a duplicate or very similar to #21943~~

I believe the issue is a bit different here. The issue is the extra white space at end of text.

Example code

final String message = 'It is a long established fact that a reader will be dist';
  
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.teal,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(15.0),
                topLeft: Radius.circular(15.0),
                bottomLeft: Radius.circular(15.0),
                bottomRight: Radius.circular(0.0),
              )
            ),
            child: Text(message)
    );
  }

output

Now if the message is changed to
final String message = 'It is a long established fact that a reader will be dist byethereadablecontent';

output

Notice the extra white space at end of the text.

I believe the issue is a bit different here. The issue is the extra white space at end of text.

Example code

final String message = 'It is a long established fact that a reader will be dist';
  
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.teal,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(15.0),
                topLeft: Radius.circular(15.0),
                bottomLeft: Radius.circular(15.0),
                bottomRight: Radius.circular(0.0),
              )
            ),
            child: Text(message)
    );
  }

output

Now if the message is changed to
final String message = 'It is a long established fact that a reader will be dist byethereadablecontent';

output

Notice the extra white space at end of the text.

yes that's a problem

@Renesanse

I see. Thanks for the clarification @Renesanse @Kartik1607 !

@Kartik1607

@Kartik1607
Can you verify this issue using the latest master?
Fail to reproduce it using the latest master.

@kangwang1988

@kangwang1988 Can confirm the issue exists on latest master.

Code

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(context) {
    return MaterialApp(
        theme: ThemeData(
            brightness: Brightness.light,
            primarySwatch: Colors.deepOrange,
            accentColor: Colors.deepPurple),
        home: Scaffold(
          body: Center(
            child: CardPage(),
          ),
        ));
  }
}

class CardPage extends StatelessWidget {
  final String message = 'It is a long established fact that a reader byethereadablecontent';
  
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.teal,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(15.0),
                topLeft: Radius.circular(15.0),
                bottomLeft: Radius.circular(15.0),
                bottomRight: Radius.circular(0.0),
              )
            ),
            child: Text(message)
    );
  }
}

Flutter doctor

[√] Flutter (Channel master, v0.2.12-pre.2349, on Microsoft Windows [Version 10.0.16299.904], locale en-US)
    • Flutter version 0.2.12-pre.2349 at E:\Personal\FlutterRepo\flutter
    • Framework revision 684d050791 (3 hours ago), 2019-01-16 01:01:51 -0500
    • Engine revision fdfb0e72f0
    • Dart version 2.1.1 (build 2.1.1-dev.1.0 d9944433af)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at E:\AndroidSDK
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = E:\AndroidSDK
    • Java binary at: E:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    • All Android licenses accepted.

just write a string with 70 percent of screen width and add word with 35 percent width, and you will see that issue

My colleague tells me that problem can be inside paragraph builder

Actually I'm going to keep this open until the other PR goes in: #30988

Reopening since the PR was reverted. This should be fixed soon, there's just some weird build error...

Alright this is merged and should be good to go. Here's how you accomplish the chat bubble effect:

Make sure you've got a flutter version that is newer than v1.5.8 (once it's released), or use the master channel.
Set the param textWidthBasis: TextWidthBasis.longestLine on your parent.

Text(
  string,
  textWidthBasis: TextWidthBasis.longestLine,
)

Alright this is merged and should be good to go. Here's how you accomplish the chat bubble effect:

Make sure you've got a flutter version that is newer than v1.5.8 (once it's released), or use the master channel.

Set the param textWidthBasis: TextWidthBasis.longestLine on your parent.
Text(
  string,
  textWidthBasis: TextWidthBasis.longestLine,
)

Good job!) Thanks

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

Text widget doesn't change it's size when line break happened #26585

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Text widget doesn't change it's size when line break happened #26585

Description

Activity

zoechi commented on Jan 15, 2019

zoechi commented on Jan 15, 2019

Kartik1607 commented on Jan 15, 2019

dsrenesanse commented on Jan 15, 2019

zoechi commented on Jan 15, 2019

kangwang1988 commented on Jan 16, 2019

Kartik1607 commented on Jan 16, 2019

dsrenesanse commented on Jan 16, 2019

dsrenesanse commented on Jan 16, 2019

justinmc commented on Apr 18, 2019

justinmc commented on May 2, 2019

justinmc commented on May 3, 2019

dsrenesanse commented on May 4, 2019

github-actions commented on Aug 14, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions