【 SelectionArea 】文字を選択できるようにしよう！【Flutter】

「アプリの文字を選択できるようにしたい！」

本記事はそんな疑問にお答えします。

Flutter 3.3で追加された、子孫のウィジェットを選択可能にするWidget、
SelectionArea Widgetを紹介します。

このWidgetによって、以下のようにテキストが選択可能となります。

とても便利なWidgetとなっています。
ぜひ本記事で学んでみて下さい！

基本的な使い方

基本的な使い方は、選択可能にしたいテキストのWidgetを、SelectionAreaにて囲うだけです。

SelectionArea(
  child: //選択可能にしたいTextWidget
）

Text Widgetを直接囲うのでなく、
いくつか他のWidgetを挟んで囲んでも全ての文字列が選択可能になります。

  @override
  Widget build(BuildContext context) {
    return SelectionArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: [
              const Text('おはようございます'),
              const Text('今日はいい天気ですね'),
              const Text('調子はいかがですか'),
            ],
          ),
        ),
      ),
    );
  }

まとめ

本記事では、Flutter 3.3で追加された、子孫のウィジェットを選択可能にするWidget、
SelectionArea Widgetを紹介しました。

いかがだったでしょうか？

とても簡単に使用可能なWidgetとなっています。

手元ではiOS, Web,macOSで選択可能なことを確認しています。

ぜひ使ってみて下さい！

本記事があなたのアプリ開発の一助となれば幸いです。

編集後記（2022/9/14）