A collapsible text demo in Flutter

expandable_text.dart

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({
    super.key,
    this.feeds = const [
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tempor eros. Aenean ipsum elit, porttitor id pretium id, vehicula non sapien. Praesent consequat quis urna vel bibendum. Praesent quis mauris porta, ultricies ligula ac, suscipit lorem. In ut aliquet dui. Cras id turpis nec erat ultricies semper. Sed pellentesque, augue nec consequat tempor, erat tortor gravida ipsum, at maximus nulla enim nec nulla. Suspendisse eu lobortis eros, ac placerat tellus. Aenean ultricies, justo eget consequat scelerisque, nunc arcu laoreet.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tempor eros. Aenean ipsum elit, porttitor id pretium id, vehicula non sapien.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tempor eros. Aenean ipsum elit, porttitor id pretium id, vehicula non sapien. Praesent consequat quis urna vel bibendum. Praesent quis mauris porta, ultricies ligula ac, suscipit lorem. In ut aliquet dui. Cras id turpis nec erat ultricies semper. Sed pellentesque, augue nec consequat tempor, erat tortor gravida ipsum, at maximus nulla enim nec nulla. Suspendisse eu lobortis eros, ac placerat tellus. Aenean ultricies, justo eget consequat scelerisque, nunc arcu laoreet.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tempor eros. Aenean ipsum elit, porttitor id pretium id, vehicula non sapien.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tempor eros. Aenean ipsum elit, porttitor id pretium id, vehicula non sapien. Praesent consequat quis urna vel bibendum. Praesent quis mauris porta, ultricies ligula ac, suscipit lorem. In ut aliquet dui. Cras id turpis nec erat ultricies semper. Sed pellentesque, augue nec consequat tempor, erat tortor gravida ipsum, at maximus nulla enim nec nulla. Suspendisse eu lobortis eros, ac placerat tellus. Aenean ultricies, justo eget consequat scelerisque, nunc arcu laoreet.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at tempor eros. Aenean ipsum elit, porttitor id pretium id, vehicula non sapien.'
    ],
  });

  final List<String> feeds;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: ListView.builder(
            itemCount: feeds.length,
            itemBuilder: (context, index) => ExpandableText(
              text: feeds[index],
            ),
          ),
        ),
      ),
    );
  }
}

class ExpandableText extends StatefulWidget {
  const ExpandableText({
    super.key,
    required this.text,
  });

  final String text;

  @override
  State<ExpandableText> createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool isExpanded = false;

  void toggleExpanded() => setState(() => isExpanded = !isExpanded);

  @override
  Widget build(BuildContext context) {
    const defaultTextLines = 5;
    final maxLines = isExpanded ? null : defaultTextLines;
    final overflow = isExpanded ? null : TextOverflow.ellipsis;

    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LayoutBuilder(
          builder: (context, constraints) {
            final span = TextSpan(text: widget.text);
            final textPainter = TextPainter(
              text: span,
              textDirection: TextDirection.ltr,
            );
            textPainter.layout(maxWidth: constraints.maxWidth);
            final numLines = textPainter.computeLineMetrics().length;

            return Column(
              children: [
                Text(
                  widget.text,
                  maxLines: maxLines,
                  overflow: overflow,
                ),
                if (numLines > defaultTextLines)
                  GestureDetector(
                    onTap: toggleExpanded,
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        isExpanded ? 'show less' : 'show more',
                        style: const TextStyle(color: Colors.redAccent),
                      ),
                    ),
                  ),
              ],
            );
          },
        ),
      ),
    );
  }
}