【Flutter】SelectionAreaでテキストをコピーできるようにする

SelectionAreaを使えば、テキストをコピーできるようになります。

本記事では、SelectionAreaの実装方法をお伝えします。

本記事の想定読者

• Flutterでアプリを開発している人

実装方法

実装方法は以下の通りです。

Textウィジェットの親ウィジェットとして、SelectionAreaを配置します。以下の感じになります。

// --中略--
  @override
  Widget build(BuildContext context) {
    var favoritesList = Provider.of<Favorites>(context);

    return SelectionArea( // ここ
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: CircleAvatar(
            // backgroundColor: Colors.primaries[m % Colors.primaries.length],
          ),
          title: Text(
            meigen.message.toString(),
            key: Key('text_$meigen'),
          ),

開発環境

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.13.5, on Microsoft Windows [Version 10.0.19045.3448], locale ja-JP)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.1.4)
[√] Android Studio (version 2021.1)
[!] Android Studio (version 4.1)
    X Unable to determine bundled Java version.
[!] Android Studio (version 4.2)
    X Unable to determine bundled Java version.
[√] VS Code (version 1.82.3)
[√] Connected device (3 available)
[√] Network resources