Flutter開発実践 - 続きを読む 長文の伸縮制御

Flutter開発実践 - 続きを読む 長文の伸縮制御

長いテキストによってコントロールが拡大および縮小される場合、読みやすくするために readmore を使用して長いテキストの拡大および縮小を処理する必要があります。

1. 続きを読むを導入する

プラグインをプロジェクトの pubspec.yaml に導入します。

  readmore: ^2.1.0
    

ReadMoreTextのプロパティは以下のとおりです。

const ReadMoreText(
    this.data, {
    Key? key,
    this.preDataText,
    this.postDataText,
    this.preDataTextStyle,
    this.postDataTextStyle,
    this.trimExpandedText = 'show less',
    this.trimCollapsedText = 'read more',
    this.colorClickableText,
    this.trimLength = 240,
    this.trimLines = 2,
    this.trimMode = TrimMode.Length,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.textScaleFactor,
    this.semanticsLabel,
    this.moreStyle,
    this.lessStyle,
    this.delimiter = _kEllipsis + ' ',
    this.delimiterStyle,
    this.callback,
  }) : super(key: key);
    

2. ReadMoreText を使用する

長いテキストで展開インジケーターと折りたたみインジケーターを使用する

ReadMoreText(
          'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
          trimLines: 2,
          colorClickableText: Colors.pink,
          trimMode: TrimMode.Line,
          trimCollapsedText: 'Show more',
          trimExpandedText: 'Show less',
          moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
        ),
    

完全なコードは次のとおりです

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

class ReadMorePage extends StatefulWidget {
  const ReadMorePage({super.key});

  @override
  State<ReadMorePage> createState() => _ReadMorePageState();
}

class _ReadMorePageState extends State<ReadMorePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HeroPage'),
      ),
      body: Center(
        child: ReadMoreText(
          'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
          trimLines: 2,
          colorClickableText: Colors.pink,
          trimMode: TrimMode.Line,
          trimCollapsedText: 'Show more',
          trimExpandedText: 'Show less',
          moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
    

3. まとめ

Flutter開発実践 - 続きを読む 長文の伸縮制御

勉強して記録し、日々改善を続けてください。