自定义 flutter 文本溢出效果，多行文字展开收起

基于 expandable 实现 Flutter 多行文本 超过行数 全文、收起 功能

上图：

e055957b-832f-431d-939d-f42c0057ebd7.gif

1、添加 expandable 依赖

dependencies:
  expandable: ^4.1.3

2、源码

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;
  final TextStyle style;
  final TextOverflow overflow;
  ExpandableText({
    Key key,
    @required this.text,
    this.maxLines,
    this.style,
    this.overflow = TextOverflow.fade
  }) : super(key: key);

  @override
  _ExpandableTextState createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State {
  int get maxLines => widget.maxLines;
  String get text => widget.text;
  TextStyle get style => widget.style;
  TextOverflow get overflow => widget.overflow;
  
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, size) {
      final span = TextSpan(text: text, style: style);
      final tp = TextPainter(
        text: span,
        maxLines: maxLines,
        textDirection: TextDirection.ltr
      );
      tp.layout(maxWidth: size.maxWidth);
 
      if (tp.didExceedMaxLines) { // 判断文字是否溢出
        return ExpandableNotifier(
        child: Column(
          children: [
            Expandable(
              collapsed: Column(
                children: [
                  Text(text, maxLines: maxLines, overflow: overflow, style: style),
                  ExpandableButton(
                    child: Text('打开', style: TextStyle(color: Colors.blue)),
                  )
                ]
              ),
              expanded: Column(
                children: [
                  Text(text, style: style),
                  ExpandableButton(
                    child: Text('收起', style: TextStyle(color: Colors.blue)),
                  ),
                ]
              ),
            )
          ]
        ),
      );
      } else {
        return Text(text, style: style);
      }
    });
  }
}

3、使用

import 'package:flutter/material.dart';
import 'package:expandable_text/expandable_text.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String text = '''
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
      文字溢出，文字溢出,文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，文字溢出，
    ''';
    String text2 = '四个文字';
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Column(
            children: [
              ExpandableText(text: text, maxLines: 5),
              SizedBox(height: 30, width: 30),
              ExpandableText(text: text2, maxLines: 5),
            ]
          )
        )
      ),
    );
  }
}

github 源码