Flutter Right-to-Left rtl wrapped multiline text hide first letter

Question

Nothing is working to get multiline text to be wrapped with Right aligment

  @override   
  Widget build(BuildContext context) {
    var tt = "ومن رأى: أن إبرته التي يخيط بها انكسرت أو انتزعت منه، فإن شأنه يتفرق ويفسد أمره، وتدل الإبرة أيضاً على المرأة لإدخال الخيط فيها، وكذلك المسلة، فمن رأى أن بيده مسلة وكانت إمرأته حبلى ولدت له إبنة، وإن لم يكن هناك حمل دل ذلك على سفره.";

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(gettitle()) ,
      ),

        body:
        new Directionality(textDirection: TextDirection.rtl, child:
        new Padding(
        padding: const EdgeInsets.all(16.0),
        child:
          new SingleChildScrollView(
              child:
                new Text(
                  tt,
                  textAlign: TextAlign.right,
                  textDirection: TextDirection.rtl,
                )
            ,)
        ),
        )

    );    
  }

Doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.3.2, on Mac OS X 10.13.4 17E202, locale en-JO)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.3)
[✓] Android Studio (version 3.0)
[✓] Connected devices (1 available)

• No issues found!
Process finished with exit code 0

Solution

I'm pretty sure this is a bug. As you say, it seems to only happen with multi-line text. With this minimal example:

  @override
  Widget build(BuildContext context) {
    return new Directionality(
      textDirection: TextDirection.rtl,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text(ttrtl2),
        ),
        body: new Padding(
          padding: const EdgeInsets.only(right: 10.0),
          child: new Text(
            ttrtl,
            style: new TextStyle(fontSize: 24.0),
          ),
        ),
      ),
    );
  }

the starting characters are not missing, but only because I have added padding on the right. It doesn't seem to be a problem with the SingleChildScrollView, because I can reproduce it with the code above. (Incidentally, SingleChildScrollView can take padding, so the same work around works.)

If you toggle Debug Paint you can see that the leading characters overlap the padding, which is why, when there is no padding, the leading characters are truncated.

You could switch to the dev channel, and try again. Or live with adding a few pixels of right padding. Or check for existing issues (I didn't see one, myself) and enter an issue.

Debug Paint Screenshot shows the text bleeding into the padding...

Comments

[wp78de]

This might be related stackoverflow.com/a/63497911/8291949