個人開発者が勉強がてらまとめているだけのサイトです

選択できる文字 Selectable Text

普通は選べない画面の文字を、なぞったり長押ししたりして選び、コピーできるようにする。

別名
文字をコピーテキスト選択長押しでコピー選択範囲コピーできる文字SelectableTextSelectionArea
動き
なぞると文字が選ばれるコピーのメニューが出る
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

Flutter の Text は、そのままでは選んだりコピーしたりできません。

1つの文章だけなら SelectableText に置き換えます。

画面の中の複数の Text をまたいで選べるようにするには、まとめて SelectionArea で包みます(見出しから本文まで続けて選べます)。

ボタンの文字など選ばせたくない所は SelectionContainer.disabled で包んで外します。

住所・注文番号・エラー文など、ユーザーがどこかへ貼り付けたくなる文字に付けると親切です。

こんなときに

  • 注文番号・住所・コード・記事本文など、コピーしたくなる文字

避けたい場面

  • ボタンやタブの文字(押すつもりが選択になってしまう)

最小コード

// 1つの文章だけ
const SelectableText('注文番号: A-2026-1112-0042')

// 画面の中の文字をまとめて選べるように
SelectionArea(
  child: Column(children: [
    const Text('見出し'),
    const Text('本文…'),
    SelectionContainer.disabled( // ここは選ばせない
      child: TextButton(onPressed: share, child: const Text('共有')),
    ),
  ]),
)

使うウィジェット

SelectableTextSelectionAreaSelectionContainer.disabled

似ているもの・一緒に見たいもの

触ってみる ↗
入力・フォーム テキスト入力の種類Text Field Styles

文字を打つ欄の見た目は「枠線」「塗り」「下線」の3種類。押すと中のラベルが上へ縮んで、枠の色が変わる。

押すとラベルが上へ縮む