jonataslaw / readmore Goto Github PK

Text color cannot be changed, always appear white.

Hello I'm trying to use readmore with the new stable flutter version but I have the next error:

../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/readmore-1.0.1/lib/readmore.dart:82:58: Error: No named parameter with the name 'nullOk'. widget.locale ?? Localizations.localeOf(context, nullOk: true); ^^^^^^

My Flutter version 3.19.6
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.2.1 23C71 darwin-arm64
(Rosetta), locale vi-VN)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.88.1)

This library is not working

Didn't work as well as I expected. I set the maximum number of lines to be 3 ,and 'read more' should not wrap

const ReadMoreText( 'sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.sampleText.', trimLines: 3, trimMode: TrimMode.Line, ),

Error:

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
../../../../.pub-cache/hosted/pub.dartlang.org/readmore-1.0.1/lib/readmore.dart:82:58: Error: No named parameter with the name 'nullOk'.
        widget.locale ?? Localizations.localeOf(context, nullOk: true);
                                                         ^^^^^^
../../../sdk/flutter/packages/flutter/lib/src/widgets/localizations.dart:413:17: Context: Found this candidate, but the arguments don't match.
  static Locale localeOf(BuildContext context) {
                ^^^^^^^^
Failed to compile application.

Flutter localization API update commit

Now, should use maybeLocaleOf method, not localeOf, if u want to get locale safety.

Any plans on adding support for RichText?

i think we should not break "Show more"

ReadMoreText(
            value,
            trimLines: 1,
            textDirection:TextDirection.rtl,
            colorClickableText: ColorPalette.primaryAppColor,
            trimMode: TrimMode.line,
            trimCollapsedText: '  Show more',
            trimExpandedText: '  Show less',
            style: TextStyles.popupMedium,
            delimiter: "",

The implementation of PR #62, aimed at improving emoji handling in TrimMode.Length, inadvertently introduces a regression in TrimMode.Line. When using TrimMode.Line with a specific trimLines value, texts containing emojis now exceed the set line limit, displaying more lines than intended.

Current behaviour trimLines: 3:

Expected behaviour trimLines: 3:

A space character at the start of the text is detected as a new line. please check the code and screenshot for details. A simple text widget and read more text was wrapped in a column

Text("widget.diet.mealName",
                   overflow: TextOverflow.ellipsis,
                   maxLines: 1,
                   style: TextFontStyle.semiBold(size: context.textPx * 16)),
               ReadMoreText(
                 " context.read<CoachDetailProvider>().coachDetailsModel!.payload.description context.read<CoachDetailProvider>().coachDetailsModel!.payload.description",
                 trimLines: 3,
                 style: TextFontStyle.regular(color: AppColor.grey1, size: context.textPx * 14),
                 colorClickableText: AppColor.primaryColor,
                 trimMode: TrimMode.Line,
                 trimCollapsedText: Translator.translate(context, 'more'),
                 trimExpandedText: Translator.translate(context, 'less'),
               ),

" context.read().coachDetailsModel!.payload.description context.read().coachDetailsModel!.payload.description",

only this line is showing the problem. i couldn't recreate this issue with other lines.

The below code is not having the issue.
Text("widget.diet.mealName", overflow: TextOverflow.ellipsis, maxLines: 1, style: TextFontStyle.semiBold(size: context.textPx * 16)), ReadMoreText( " this text doesn't have the issue.", trimLines: 3, style: TextFontStyle.regular(color: AppColor.grey1, size: context.textPx * 14), colorClickableText: AppColor.primaryColor, trimMode: TrimMode.Line, trimCollapsedText: Translator.translate(context, 'more'), trimExpandedText: Translator.translate(context, 'less'), ),

Need to remove delimiter when show less, I try it but does not work for me.

TextSpan _delimiter = TextSpan(
      text: _readMore
          ? widget.trimCollapsedText.isNotEmpty
              ? ''
              : ''
          : widget.trimExpandedText.isNotEmpty
              ? ''
              : '',
      style: _defaultDelimiterStyle,
      recognizer: TapGestureRecognizer()..onTap = _onTapLink,
    );

If we put ReadMoreText in a ListView it not worked as expected

    final child = ReadMoreText(
      'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
      trimLines: 2,
      colorClickableText: Colors.pink,
      trimMode: TrimMode.Line,
      trimCollapsedText: '...Show more',
      trimExpandedText: ' show less',
    );
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        child,
        SizedBox(height: 15),
        ListView(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          children: [
            child
          ],
        ),
      ],
    );

I/flutter (13835): linkSize Size(90.0, 19.0) textSize Size(347.0, 38.0)
I/flutter (13835): linkSize Size(347.0, 19.0) textSize Size(347.0, 38.0)

You can see linkSize in a ListView is wrong

on the web long text appear in red screen

Hello,

I used your package a lot to render text on my application, it gives up a very important feature: wrapping text in order to hide if it is too long.

Now, there is a new requirement: rendering markdown instead of simple text. For doing this I used this package; but it does not include a easy way to hide excesive text as this package does.

Do you think this package could have the capability to wrap widgets too?

Thank you.

Issue Description

Summary

I propose adding enhanced styling and interaction capabilities for specific text patterns within ReadMoreText, such as mentions, hashtags, and URLs. This feature would allow developers to customize the appearance of these elements and define custom actions when they are tapped, such as navigating to a user's profile when a mention is clicked.

Use Case

In many applications, text content includes special elements like mentions (<@userId>), hashtags (#topic), and URLs that users expect to interact with. For example, tapping on a mention might navigate to that user's profile page, and clicking a hashtag could show related content. Additionally, these elements often require distinct styling to stand out from the surrounding text, signaling to users that they are interactive.

Proposed Solution

Introduce a mechanism to define custom styles and tap actions for mentions, hashtags, and URLs within the ReadMoreText widget. This could be achieved through a list of Annotation objects (or a similar construct) where each annotation includes:

• A RegExp to match the specific pattern (mention, hashtag, URL).
• A TextSpan Function that allows developers to customize the style and define tap actions for matched text.

This approach would not only enhance the visual differentiation of these special text elements but also enable developers to implement interactive behaviors, enhancing user engagement with the content.

Handling Modified Data

An important aspect of this feature is handling cases where the displayed text is modified, such as converting a mention from <@userId> to a readable username (e.g., UserA). The solution should gracefully support such transformations, ensuring that the custom styles and interactions are preserved.

Impact

Implementing this feature would significantly increase the utility and flexibility of the ReadMoreText widget, making it a more powerful tool for developers creating content-rich applications.

Currently, in case the text too long will collapsed,
How can I make it expanded (read more mode) by default for the long text?

show less is showing "...show less" it should be "show less" only. please fix it.

If user wants to perform some other activity without extending the text, then user will not able to do this with current code, We can make a optional parameter where user can override the existing onTap method and can perform other task.

Is there anyway of increasing the touch area of the 'Read more' or 'Show more' text?
For accessibility purpose i need to increase this touch target to at least 48dx, i could increase the text font size, but it should be possible to only increase the touch area of the clickable text.

I use your package for an website app. If I build for Android and windows is working, for the web it`s a simple text.
Can you check your package for web-support?
Thank you for your work!

I figured out that we have bug in RTL mode

It tried to fix it, but failed , I think the bug is here https://github.com/jonataslaw/readmore/blob/master/lib/readmore.dart#L148-L152

I changed it to, it works better but not fixed

          if (textDirection == TextDirection.rtl) {
            final pos = textPainter.getPositionForOffset(Offset(
              linkSize.width,
              textSize.height,
            ));
            endIndex = textPainter.getOffsetBefore(pos.offset);
            // endIndex = textPainter.getOffsetAfter(pos.offset); I tried getOffsetAfter too
          } else {
            final pos = textPainter.getPositionForOffset(Offset(
              textSize.width - linkSize.width,
              textSize.height,
            ));
            endIndex = textPainter.getOffsetBefore(pos.offset);
          }

@jonataslaw can you take a look?

Read more and Readless color and text style cannot be changed.

I am using it in a quiz app and upon if a user has selected "Show More" for first question then in next question as well the state remains as expanded. Is there a way to reset it?

return Material( color: Colors.black26, // ignore: non_constant_identifier_names child: ListView.builder( itemCount: 10, itemBuilder: (BuildContext, context) { return Padding( padding: EdgeInsets.only(top: 1.h), child: Card( clipBehavior: Clip.antiAlias, child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ListTile( leading: CircleAvatar( child: CachedNetworkImage( imageUrl: "http://www.canada-work.com/_/rsrc/1531284300421/assistants/female_generic_profile.png", width: 80.0, height: 80.0, ), ), title: Text( "Harly", style: TextStyle(fontWeight: FontWeight.bold), ), subtitle: Row( children: [ Text("2 hours ago"), Padding( padding: EdgeInsets.only(left: 0.3.w), child: Icon(Icons.public, size: 15.0), ), ], ), trailing: IconButton( icon: Icon(Icons.more_vert), onPressed: () {}, ), ), **//Text("GGDSOPISDPOFPSDOPFDOPOFOD") // work.!but readmoretext not.** ReadMoreText( "GGWPasdfsfjksdfsdf[psdf[psdof[odf[p[pd[pfosd[pfo[pdf[pd", trimLines: 3, colorClickableText: Colors.pink, trimMode: TrimMode.Line, trimCollapsedText: 'Show more', trimExpandedText: 'Show less', // moreStyle: TextStyle( // fontSize: 14, fontWeight: FontWeight.bold), ), Divider(), ButtonBar( // buttonHeight: 0.1.h, alignment: MainAxisAlignment.spaceAround, children: [ TextButton.icon( onPressed: () {}, icon: Icon(Feather.thumbs_up), label: Text("like"), ), TextButton.icon( onPressed: () {}, icon: Icon(Feather.message_square), label: Text("comment"), ), // Spacer(), IconButton( icon: Icon(Feather.share_2, color: Colors.blue), onPressed: () {}), ], ), ], ), )), ); }), );

Love this package, and it works great! But would be awesome to have url detection and launch url support within the package.

Edit: It appears launch url was added to the last merge, but it is not working on the main package.

HI, I don't know if this is only with me, but I see the '...' ellipses when the text is expanded.

content should expand and contract with a duration.
How can I achieve that?

I don't see that color anywhere in my text.
It doesn't change the color of 'trimCollapsedText'.
I have to set moreStyle if I want to change 'trimCollapsedText' (not sure why it's called moreStyle if it affects 'trimCollapsedText'. I'd expect it to be called trimCollapsedTextStyle or something similar.

When the last character of the line that is collapsed is an emoji, an error is thrown :

════════ Exception caught by painting library ══════════════════════════════════
The following ArgumentError was thrown while building a TextSpan:
Invalid argument(s): string is not well-formed UTF-16

It would be good if this package support selectable text as it is needed in many case.

hi, it's not work on Mobile Web? or my code is wrong?
thanks