expandable_text.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;
 
  const ExpandableText({
    super.key,
    required this.text,
    this.maxLines = 2,
  });
 
  @override
  State<ExpandableText> createState() => _ExpandableTextState();
}
 
class _ExpandableTextState extends State<ExpandableText> {
  bool _isExpanded = false;
  late TextPainter _textPainter;
  late bool _hasOverflow;
 
  @override
  void initState() {
    super.initState();
    _checkOverflow();
  }
 
  void _checkOverflow() {
    final textStyle = TextStyle(
      fontSize: 14.sp,
      height: 1.5,
    );
 
    _textPainter = TextPainter(
      text: TextSpan(text: widget.text, style: textStyle),
      maxLines: widget.maxLines,
      textDirection: TextDirection.ltr,
    )..layout(maxWidth: 32.w);
 
    _hasOverflow = _textPainter.didExceedMaxLines;
  }
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        _checkOverflow();
 
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              widget.text,
              style: Theme.of(context).textTheme.bodySmall?.copyWith(
                    fontSize: 10.sp,
                  ),
              maxLines: _isExpanded ? null : widget.maxLines,
              overflow:
                  _isExpanded ? TextOverflow.visible : TextOverflow.ellipsis,
            ),
            if (_hasOverflow) ...[
              SizedBox(height: 4.h),
              GestureDetector(
                onTap: () {
                  setState(() {
                    _isExpanded = !_isExpanded;
                  });
                },
                child: Text(
                  _isExpanded ? 'Read Less' : 'Read More',
                  style: Theme.of(context).textTheme.bodySmall?.copyWith(
                        color: Theme.of(context).colorScheme.primary,
                        fontSize: 9.5.sp,
                        fontWeight: FontWeight.w100,
                      ),
                ),
              ),
            ],
          ],
        );
      },
    );
  }
}