jonataslaw / readmore Goto Github PK
View Code? Open in Web Editor NEWA Flutter plugin than allow expand and collapse text dynamically
License: MIT License
A Flutter plugin than allow expand and collapse text dynamically
License: MIT License
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
?
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.
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.
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.
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:
RegExp
to match the specific pattern (mention, hashtag, URL).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.
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.
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?
readmore:
git:
url: https://github.com/masreplay/readmore.git
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.