Flutterでテキストをコピーできない！？ SelectionAreaとSelectableTextの使い方

Flutter

遠藤亮

2025年02月25日

はじめに

こんにちは、メンバーズ Cross Application カンパニーの遠藤です。

サービスローンチにFlutter経験ゼロで関わることがあったので、その際にふとで調べたことを記載してます。

概要

FlutterのWidgetはデフォルトではコピペできない仕様で、コピペしたいならSelectionAreaか、SelectionRegionを使いなさいと公式サイトでも言われてます。

参照

使い方

1. SelectionAreaの書き方例

class MyWidget extends StatelessWidget {
 const MyWidget({super.key});
　
　@override
　Widget build(BuildContext context) {
　　return const SelectionArea(
　　　child: Scaffold(
　　　　body: Row(
　　　　　children: [
　　　　　　Text('kitto'),
　　　　　　Text('daijyobu'),
　　　　　],
　　　　),
　　　),
　　);
　}
}

普通に選択できるようであればこちらで充分に感じました。

2. SelectionRegionの書き方例

class MyWidget extends StatelessWidget {
 MyWidget({super.key});

 final _focusNode = FocusNode();
 @override
 Widget build(BuildContext context) {
   return SelectableRegion(
     selectionControls: materialTextSelectionControls,
     focusNode: _focusNode, // initialized to FocusNode()
     child: Scaffold(
       appBar: AppBar(title: const Text('Flutter Code Sample')),
       body: ListView(
         children: const <Widget>[
           Text('Item 0', style: TextStyle(fontSize: 50.0)),
           Text('Item 1', style: TextStyle(fontSize: 50.0)),
         ],
       ),
     ),
   );
 }
}

こちらはコードに追記されているように選択コントロールができるため、指定された選択箇所をコピペできたりアレンジするにはこちらが良いみたいです。

3. SelectableTextの書き方

class MyWidget extends StatelessWidget {
 const MyWidget({super.key});

 @override
 Widget build(BuildContext context) {
   return const SelectableText(
     'Hello world!!',
     textAlign: TextAlign.center,
     style: TextStyle(fontWeight: FontWeight.bold),
   );
 }
}

まとめ

一通り使ってみましたが、まずはSelectionAreaで良いかと思います。その上で、ボタンを押下してコピーをする処理や、選択した一定の範囲をコピーするなど(よくあるコードをコピーするボタン)のちょっと癖がある際はSelectionRegionを。そして一定の文字のみコピー可能にする場合は単一のスタイルを持つテキストに対してはSelectableTextを使うという理解で進めようと思います。

以下に各メソッドの特徴をまとめました。

メソッド	用途	特徴
SelectionArea	ほとんどのケースで使用可能	基本的なテキスト選択を有効　　化
SelectionRegion	一部のテキストを選択可能にする	選択範囲をカスタマイズ可能
SelectionText	単一のテキストを選択可能	スタイル適用が容易