はじめに (対象読者・この記事でわかること)

この記事は、Flutterアプリ開発をしている中級者以上の方を対象にしています。特に、動的にテキストサイズを調整するAutoSizeTextを使用しているけれども、そのテキストを選択可能にしたいと考えている方向けです。

この記事を読むことで、AutoSizeTextの文字を選択可能にする具体的な実装方法がわかります。また、選択可能にする際の注意点やハマりやすいポイントについても理解できるようになります。実際のコード例を交えて解説するので、すぐに自身のプロジェクトに応用できるでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Flutterの基本的なウィジェットとレイアウトの知識 - Dart言語の基本的な構文 - AutoSizeTextの基本的な使い方

AutoSizeTextと文字選択機能の必要性

Flutterで動的なテキストサイズ調整を行う際に、多くの開発者がflutter_widget_from_htmlパッケージのAutoSizeTextやauto_size_textパッケージを使用します。これらのウィジェットは、指定されたスペースに収まるようにテキストのフォントサイズを自動で調整してくれます。

しかし、標準のAutoSizeTextは文字選択機能がサポートされていません。ユーザーがテキストを選択してコピーしたり、検索したりといった操作ができないため、ユーザビリティの面で制限があります。

この問題を解決するために、SelectableウィジェットとAutoSizeTextを組み合わせる方法があります。SelectableウィジェットはFlutterに標準で備わっている文字選択機能を提供するウィジェットです。これらを組み合わせることで、動的なテキストサイズ調整と文字選択機能の両立が可能になります。

ただし、単純にSelectableでAutoSizeTextをラップするだけでは期待通りに動作しない場合があります。特に、テキストサイズが変更された際の選択範囲の調整や、パフォーマンスに関する問題が発生することがあります。これらの課題を解決するための具体的な実装方法を次のセクションで詳しく解説します。

AutoSizeTextの文字選択機能を実装する方法

ここでは、AutoSizeTextの文字を選択可能にするための具体的な実装手順を解説します。基本的な実装方法から、より高度なカスタマイズ方法まで段階的に説明します。

基本的な実装方法

まず、最も基本的な実装方法から始めましょう。auto_size_textパッケージのAutoSizeTextと、FlutterのSelectableウィジェットを組み合わせる方法です。

Dart

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

class SelectableAutoSizeText extends StatelessWidget {
  final String text;
  final TextStyle? style;
  final int maxLines;
  final TextDirection? textDirection;

  const SelectableAutoSizeText({
    Key? key,
    required this.text,
    this.style,
    this.maxLines = 2,
    this.textDirection,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Selectable(
      child: AutoSizeText(
        text,
        style: style,
        maxLines: maxLines,
        minFontSize: 8,
        maxFontSize: 20,
        textAlign: TextAlign.left,
        textDirection: textDirection,
      ),
    );
  }
}

上記のコードでは、SelectableウィジェットでAutoSizeTextをラップしています。これにより、AutoSizeTextの自動サイズ調整機能と文字選択機能の両立が可能になります。

高度な実装方法

基本的な実装では、文字選択は可能ですが、テキストサイズが変更された際の選択範囲の調整が不十分な場合があります。より高度な実装として、テキストサイズ変更時に選択範囲を適切に調整する方法を解説します。

Dart

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

class AdvancedSelectableAutoSizeText extends StatefulWidget {
  final String text;
  final TextStyle? style;
  final int maxLines;
  final TextDirection? textDirection;
  final TextAlign? textAlign;
  final List<Widget>? selectionActions;

  const AdvancedSelectableAutoSizeText({
    Key? key,
    required this.text,
    this.style,
    this.maxLines = 2,
    this.textDirection,
    this.textAlign,
    this.selectionActions,
  }) : super(key: key);

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

class _AdvancedSelectableAutoSizeTextState extends State<AdvancedSelectableAutoSizeText> {
  late TextEditingController _textController;
  late FocusNode _focusNode;
  bool _isTextSelected = false;

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController(text: widget.text);
    _focusNode = FocusNode();
  }

  @override
  void dispose() {
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          constraints: BoxConstraints(
            maxHeight: 100, // 適切な高さに調整
          ),
          child: Selectable(
            onSelectionChanged: (selection, cause) {
              setState(() {
                _isTextSelected = selection.baseOffset != selection.extentOffset;
              });
            },
            child: AutoSizeText(
              widget.text,
              style: widget.style,
              maxLines: widget.maxLines,
              minFontSize: 8,
              maxFontSize: 20,
              textAlign: widget.textAlign ?? TextAlign.left,
              textDirection: widget.textDirection,
              presetFontSizes: [8, 10, 12, 14, 16, 18, 20], // 使用可能なフォントサイズを指定
              stepGranularity: 2, // フォントサイズの変更ステップを指定
              key: ValueKey(widget.text), // テキスト変更時にウィジェットを再構築
            ),
          ),
        ),
        if (_isTextSelected)
          Row(
            children: (widget.selectionActions ?? _getDefaultActions())
                .map((action) => Padding(
                      padding: EdgeInsets.only(right: 8),
                      child: action,
                    ))
                .toList(),
          ),
      ],
    );
  }

  List<Widget> _getDefaultActions() {
    return [
      IconButton(
        icon: Icon(Icons.copy),
        onPressed: () {
          // 選択されたテキストをコピーする処理
          final selection = _textController.selection;
          if (selection != null) {
            final selectedText = widget.text.substring(selection.start, selection.end);
            Clipboard.setData(ClipboardData(text: selectedText));
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('テキストをコピーしました')),
            );
          }
        },
      ),
      IconButton(
        icon: Icon(Icons.share),
        onPressed: () {
          // 選択されたテキストを共有する処理
          final selection = _textController.selection;
          if (selection != null) {
            final selectedText = widget.text.substring(selection.start, selection.end);
            Share.share(selectedText);
          }
        },
      ),
    ];
  }
}

この実装では、SelectableウィジェットとAutoSizeTextを組み合わせた上で、選択状態を管理するためのロジックを追加しています。また、選択されたテキストに対する操作（コピー、共有など）を提供するUIも追加しています。

実装中に遭遇する問題と解決策

問題1：テキストサイズ変更時に選択範囲がずれる AutoSizeTextでテキストサイズが変更された場合、選択範囲が正しく表示されないことがあります。

解決策： この問題を解決するためには、AutoSizeTextのkeyプロパティを使用して、テキストが変更されたときにウィジェットを再構築する必要があります。上記の実装例では、key: ValueKey(widget.text)を追加しています。

問題2：パフォーマンスの問題 長いテキストや多数のAutoSizeTextを表示する場合、パフォーマンスの問題が発生することがあります。

解決策： パフォーマンスを向上させるためには、以下の対策が有効です。

  1. AutoSizeTextのpresetFontSizesプロパティを使用して、使用可能なフォントサイズのリストを指定します。
  2. stepGranularityプロパティを使用して、フォントサイズの変更ステップを指定します。
  3. 必要に応じて、AutomaticKeepAliveClientMixinを使用して状態を保持します。

上記の実装例では、これらの対策を取り入れています。

問題3：選択テキストに対する操作の実装 選択されたテキストに対する操作（コピー、共有など）を実装する方法がわからない。

解決策： SelectableウィジェットのonSelectionChangedコールバックを使用して、選択範囲の変更を検知します。選択範囲が変更されたら、TextEditingControllerのselectionプロパティから選択されたテキストを取得し、必要な操作を実行します。

上記の実装例では、コピーと共有の操作を実装しています。必要に応じて、カスタムアクションを追加することも可能です。

まとめ

本記事では、FlutterでAutoSizeTextの文字を選択可能にする方法について解説しました。

  • 基本的な実装方法：SelectableウィジェットとAutoSizeTextを組み合わせる方法
  • 高度な実装方法：選択状態の管理と選択テキストに対する操作UIの追加
  • ハマりやすい問題と解決策：選択範囲のずれとパフォーマンス問題の解決方法

この記事を通して、AutoSizeTextを使用しながらも文字選択機能を実装する方法を理解できたはずです。これにより、ユーザビリティの高いFlutterアプリを開発できるようになります。

今後は、選択テキストに対するより高度な操作や、パフォーマンスをさらに最適化する方法についても記事にする予定です。

参考資料