readMore method

Widget readMore(
  1. {String collapsedButtonText = '',
  2. String expandedButtonText = '',
  3. double minHeight = 60,
  4. Color? color}
)

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,
      );
    },
  );
}