readMore method
A widget extension that enables the widget to be collapsed and uncollapsed.
Text(
'Some very long text that will need to be collapsed.',
textAlign: TextAlign.justify,
).readMore(collapsedButtonText: 'Read More', expandedButtonText: 'Collapse',)
This is typically used with long Text widgets, where their length might complicate navigation.
When collapsed, the component will take the height of minHeight
. If the icon's height does not exceed
minHeight
, then no button to collapse/expand the widget will be shown.
collapsedButtonText
and expandedButtonText
define the button's text for when the widget is collapsed and
expanded respectively. color
defines the color to be used for the fadeout gradient indicating the widget is
collapsed, and defaults to ColorScheme.background.
See also:
- ZdsExpandable, which wraps the widget to collapse/expand instead.
Implementation
Widget readMore({
String collapsedButtonText = '',
String expandedButtonText = '',
double minHeight = 60,
Color? color,
}) {
return MeasureSize(
child: this,
builder: (BuildContext context, Size size) {
final ComponentStrings strings = ComponentStrings.of(context);
if (size.height < minHeight) {
return Padding(padding: const EdgeInsets.only(bottom: 16), child: this);
}
return _ExpandableContainer(
collapsedButtonText:
collapsedButtonText.isEmpty ? strings.get('READ_MORE', 'Read more') : collapsedButtonText,
expandedButtonText: expandedButtonText.isEmpty ? strings.get('COLLAPSE', 'Collapse') : expandedButtonText,
minHeight: minHeight,
color: color ?? Theme.of(context).colorScheme.background,
child: this,
);
},
);
}