FlutterのTextFieldのコンテキストメニューのカスタマイズ方法についてまとめました。

コンテキストメニューとは

テキストの選択中に表示されるCut/Copy/Share等のボタンを含む操作メニューの事です。

環境情報

  • Flutter : 3.19.4
  • 動作確認に使ったOS：Android
  • Android Studio : Jellyfish | 2023.3.1

カスタマイズする

下記のようにTextFieldのcontextMenuBuilderを使用してカスタマイズします。

        TextField(
          contextMenuBuilder: (context, editableTextState) {
            final List buttonItems = editableTextState.contextMenuButtonItems;
            buttonItems.removeWhere((ContextMenuButtonItem buttonItem) {
              return buttonItem.type == ContextMenuButtonType.cut;
            });
            return AdaptiveTextSelectionToolbar.buttonItems(
              anchors: editableTextState.contextMenuAnchors,
              buttonItems: buttonItems,
            );
          },
        ),

AdaptiveTextSelectionToolbar

プラットフォームに応じたコンテキストメニューを生成できるWidgetです。
名前付きコンストラクタが下記のように5つ定義されています。

  • AdaptiveTextSelectionToolbar.buttonItems
  • AdaptiveTextSelectionToolbar.editable
  • AdaptiveTextSelectionToolbar.editableText
  • AdaptiveTextSelectionToolbar.selectable
  • AdaptiveTextSelectionToolbar.selectableRegion

コンテキストメニューを何で生成するかによって使い分ける必要があります。
今回はAdaptiveTextSelectionToolbar.buttonItemsで
コンテキストメニューに表示するボタンからコンテキストメニューを生成しています。

contextMenuBuilder

コンテキストメニューWidget生成用のビルダー関数です。
この関数は引数で下記のようなコンテキストメニューのカスタマイズに使用できる情報を受け取っています。

  • contextMenuAnchors ：コンテキストメニューの表示位置を制御する為の情報
  • contextMenuButtonItems：コンテキストメニューに表示されるデフォルトのボタンリスト

今回はcontextMenuButtonItemsからテキストカット操作用のボタンを取り除いています。

動作確認

まとめ

contextMenuBuilderとAdaptiveTextSelectionToolbarを使用する事でコンテキストメニューのカスタマイズを行うことができました。

参考文献

https://docs.flutter.dev/release/breaking-changes/context-menus#textselectioncontrols-cancut-and-other-button-booleans
https://api.flutter.dev/flutter/material/TextField/contextMenuBuilder.html