Flutter로 버튼을 누르면 신축Text를 할 수 있어요.

개시하다

긴 텍스트를 표시할 때는 먼저 일부만 표시하고 버튼 등을 누르면 전체 텍스트를 표시하는 UI가 표시됩니다.
Folio
Udemy
음악.



iOS 표준 음악 애플리케이션의 동작만 조금 다르고'추가 디스플레이'를 누르면 전체 텍스트가 모드로 표시됩니다.
Flutter로 위와 같은 UI를 만들고 싶은데 의외로 정보가 없으니 정리해 봅시다.
그리고 이번에 만든 물건은 모두 아래 창고에 있습니다.🙇‍♂️
https://github.com/hayabusabusa/zenn_expandable_text_sample

만든 물건

다음 조건에 맞는 제품을 제작합니다.

여러 줄의 텍스트만 초기 상태로 표시

버튼을 누르면 전체 텍스트 보기로 전환

짧은 텍스트에서 버튼 등을 표시하지 않음

이루어지다

그럼 실제로 해볼게요.
표시할 텍스트의 행 수와 크기는 그려진 후에만 알 수 있으므로LayoutBuilder와 TextPainer 그려진 텍스트의 행 수와 크기 사이에서 최대 행 수를 표시하는 Widget을 전환합니다.

LayoutBuilder

LayoutBuilder에서 Widget 크기를 가져오고 텍스트를 그릴 때 얻은 크기에서 너비 정보를 추출하여 사용합니다.

@override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (_, constraints) {
      // `constrains` に入っているサイズの情報を利用してテキストの描画等を行う
    });
  }

https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

TextPainter

지정한 TextPainter 에 맞는 Text 조건에서 텍스트를 그리고 최대 줄 수에 도달했는지 확인하십시오.

@override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (_, constraints) {
      // テキストのスタイル、最大行数等を指定して `TextPainter` を作成
      final textStyle = widget.style ?? DefaultTextStyle.of(context).style;
      final textSpan = TextSpan(text: widget.data, style: textStyle);
      final textPainter = TextPainter(text: textSpan, textDirection: TextDirection.ltr, maxLines: widget.maxLines);

      // テキストの描画を行う
      textPainter.layout(maxWidth: constraints.maxWidth);

      if (textPainter.didExceedMaxLines) {
        // 最大行数よりも多いテキストの場合
      } else {
        // 最大行数よりも少ないテキストの場合
      }
    });
  }

https://api.flutter.dev/flutter/painting/TextPainter-class.html

만들어진 물건

상기 두 가지를 하나로 정리했다TextStyle.
모양새와 동작은 다음과 같습니다.
짧은 텍스트에는 단추가 표시되지 않고, 긴 텍스트만 표시되며, 단추를 누르면 열거나 닫을 수 있습니다.

소스 코드
expandable_text.dart

import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  const ExpandableText(
    this.data, {
      Key key,
      this.maxLines = 3,
      this.textOverflow = TextOverflow.fade,
      this.style,
    }
  ): super(key: key);

  final String data;
  final int maxLines;
  final TextOverflow textOverflow;
  final TextStyle style;

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

class _ExpandableTextState extends State<ExpandableText> with SingleTickerProviderStateMixin {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (_, constraints) {
      final textStyle = widget.style ?? DefaultTextStyle.of(context).style;
      final textSpan = TextSpan(text: widget.data, style: textStyle);
      final textPainter = TextPainter(text: textSpan, textDirection: TextDirection.ltr, maxLines: widget.maxLines);

      textPainter.layout(maxWidth: constraints.maxWidth);

      if (textPainter.didExceedMaxLines) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              widget.data,
              style: textStyle,
              overflow: widget.textOverflow,
              maxLines: _isExpanded ? null : widget.maxLines,
            ),
            const SizedBox(height: 4.0,),
            FlatButton(
              onPressed: () {
                setState(() {
                  _isExpanded = !_isExpanded;
                });
              }, 
              child: Text(
                _isExpanded ? '閉じる' : '開く'
              ),
            )
          ],
        );
      } else {
        return Text(
          widget.data,
          style: textStyle,
          maxLines: widget.maxLines,
        );
      }
    });
  }
}

최후

StatefulWidget의 부분Column을 바꾸면 iOS 표준과 비슷한 음악 애플리케이션도 만들 수 있을 것이다.
그리고 신축할 때 애니메이션을 틀어주면 더 좋을 것 같아요.🤔

참고 자료

How to get dynamic text lines for Text widget ？

Flutter: How to Get the Number of Text Lines