【Flutter】 TextFieldのカーソル位置を入力文字の末尾に移動する方法

今回は、Flutterの「TextField」ウィジェットのカーソルの位置を入力文字の末尾に移動する方法を解説します。

入力文字をコードで管理する場合などに用いる機会があるかと思います。この機会に学習していきましょう。

TextFieldのカーソル位置を入力文字の末尾に移動する方法

まず初めに「TextFiled」ウィジェットの「controller」プロパティにTextEditingControllerを設定します。

//controllerを変数で管理
TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: TextField(
      controller: _controller,  //_controllerを設定
    ),
  );
}

次にカーソル位置を入力文字の末尾に移動する方法は「controller.selection」を設定することで実現できます。

@override
Widget build(BuildContext context) {
  controller.selection = TextSelection.fromPosition(  //入力文字のカーソルの位置を管理
    TextPosition(offset: controller.text.length),  //入力されている文字数を取得し、その位置にカーソルを移動することで末尾にカーソルを当てる
  );

  return Scaffold(
    body: TextField(
      controller: _controller,  //_controllerを設定
    ),
  );
}

「controller.selection」の設定で以下のようにすることでカーソルの位置を頭にすることもできます。

controller.selection = TextSelection.fromPosition(
  TextPosition(offset: 0),  //カーソルの位置を0にすることでカーソルの位置を頭に設定
);

おわりに

今回は、Flutterの「TextField」ウィジェットのカーソルの位置を入力文字の末尾に移動する方法を解説させていただきました。

TextFieldの設計は色々と奥が深いので他にも色々と紹介していけたらと思っています。

当ブログではプログラミング学習に関するコンテンツを執筆しております。

他にもTextFieldのキーボードをボタンや画面タップで閉じる方法を解説している記事もございます。

ぜひ合わせてご覧ください。

【Flutter】 ボタンや画面タップでキーボードを閉じる方法を解説

Flutterで表示されるキーボードを外部アクションで閉じる方法を解説します。ボタンや画面をタップすることでキーボードを閉じる方法は、「FocusScope.of(context).unfocus()」メソッドを用いることです。こちらをタップアクションの処理に組み込むことでキーボードを閉じることができます。

pryogram.com

2022.02.26

最後までご覧いただきありがとうございました。