fluttercandies / extended_text

A powerful extended official text for Flutter, which supports Speical Text(Image,@somebody), Custom Background, Custom overFlow, Text Selection.
MIT License
664 stars 134 forks source link

Overflow widget in right-to-left language #138

Open krzysztof-swi opened 1 year ago

krzysztof-swi commented 1 year ago

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 commented 1 year ago

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

krzysztof-swi commented 1 year ago

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: https://github.com/fluttercandies/extended_text/pull/139

zmtzawqlp commented 1 year ago

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 commented 1 year ago

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

zmtzawqlp commented 1 year ago

it already has https://github.com/flutter/flutter/issues/111381