Skip to content
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.

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

Overflow widget in right-to-left language #138

Open
krzysztof-swi opened this issue Feb 2, 2023 · 5 comments
Open

Overflow widget in right-to-left language #138

krzysztof-swi opened this issue Feb 2, 2023 · 5 comments

Comments

@krzysztof-swi
Copy link

Hi,
When using language like arabic, text is read from right to left.
So the end of the text is in bottom left corner.
Currently overflow widget displays incorrectly - in bottom right corner, as visible on the screenshot.
obraz

Attached below is a code snippet for this example:

import 'package:extended_text/extended_text.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: OverflowTest(),
    );
  }
}

class OverflowTest extends StatelessWidget {
  const OverflowTest({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Directionality(
        textDirection: TextDirection.rtl,
        child: SizedBox(
          width: 200,
          child: ExtendedText.rich(
            const TextSpan(
                text: "كن لا بد أن أوضح لك أن كل هذه الأفكار"
                    " المغلوطة حول استنكار  النشوة وتمجيد"
                    " الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة"
                    " وأساس تلك السعادة البشرية، فلا أحد يرفض أو"
                    " يكره أو يتجنب الشعور بالسعادة، ولكن بفضل"
                    " هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا"
                    " بد أن نستشعرها بصورة أكثر عقلانية ومنطقية"
                    " فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه ل"
                    "ا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم"
                    " ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي"),
            overflowWidget: _getOverflowWidget(context),
            maxLines: 2,
          ),
        ),
      ),
    ));
  }

  TextOverflowWidget _getOverflowWidget(BuildContext context) {
    return const TextOverflowWidget(
      debugOverflowRectColor: Colors.green,
      child: Text(" أكثر "),
    );
  }
}

If I use overflow: TextOverflow.ellipsis, instead of overflowWidget it displays correctly - on the left end of the text.

@zmtzawqlp
Copy link
Member

not support right to left language due to TextPainter is not support

@krzysztof-swi
Copy link
Author

I'm not sure we understood each other.
The desired effect is shown on the screen:
obraz

I was able to obtain it with small changes in TextOverflowMixin
Please find below a pull request:
#139

@zmtzawqlp
Copy link
Member

i means TextPainter is not support RTL to get position. it's not just to put it to bottom left but it need to compute position to avoid cut off words or WidgetSpan.

@krzysztof-swi
Copy link
Author

I understand. Maybe it would be worth creating an issue to Flutter to handle this situation?

@zmtzawqlp
Copy link
Member

it already has flutter/flutter#111381

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants