Flutterのテキスト入力・TextFieldの各種設定と使い方

はじめに

本記事ではテキスト入力を受け付ける一番基本のウィジェット、TextFieldウィジェットについてまとめていきます。

TextFieldに関しては十分な機能をスッキリ備えて使い方も非常に直感的ですので、書き方を認識しておけば必要に応じて属性を設定するだけで簡単に使えます。

今回はそれに加えて、GetXによる状態管理の要素をサンプルとして加えています。これによってTextFieldに文字が入力されるたびに、同時に表示されている画面上のTextウィジェットを更新していきます。

同じ画面のUIパーツを更新するのも、ページ遷移先・遷移元のUIパーツを更新するのも、理屈は変わらないことを確認してください。

TextFileld

TextFieldウィジェットは、ユーザがテキストを入力するボックスを提供するものです。設定値を様々に変えることで複数行にしたり、パスワード入力のときのように伏せ字にしたりすることもできます。

サンプルコード中、TextFieldが出てくるのは最後の2つのみです。基本的にTextFieldをGUIパーツとして登場させるだけなら、下部にあるTextFieldのところの形を入力すればOKです：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

//(1) このクラスにアプリ横断の状態変数を入れる
class Controller extends GetxController {
  var title = "".obs;
  var passCode = "".obs;
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //(2) GetMaterialAppを使います
    return const GetMaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //(3) コントローラーを一回putで登録しておく
    var cntl = Get.put(Controller());

    return Scaffold(
      appBar: AppBar(
        title: const Text("ホーム"),
      ),
      body: Center(
          child: Container(
            padding: const EdgeInsets.all(100),
            child:Column(children: [
              //(4) 動的な数値を含む部分にはObx()でラップしておく
              Obx(()=>Text("入力値：${cntl.title}")),
              const Padding(padding: EdgeInsets.only(top: 50)),
              //(5) テキスト入力
              TextField(
                maxLength: 50,
                maxLines:1,
                decoration: const InputDecoration (
                  icon: Icon(Icons.android),
                  hintText: "いまどうしてる?",
                  labelText: "tweet",
                ),
                onChanged: (String txt)=> cntl.title.value = txt,
              ),
              TextField(
                maxLength: 16,
                maxLines:1,
                decoration: const InputDecoration (
                  icon: Icon(Icons.vpn_key),
                  hintText: "パスワードを入力",
                  labelText: "pass code",
                ),
                obscureText: true,
                onChanged: (String txt)=> cntl.passCode.value = txt,
              ),
            ])
          )
      ),
    );
  }
}

コードを実行すると、下記の画面が表示されます：

f:id:linkedsort:20211030183529p:plain:w400

文字入力のフィールドをタッチすると、ヒント文字列が表示されます。

f:id:linkedsort:20211030183611p:plain:w400

ここでは上段のテキストフィールドを更新すると同時に、上にある入力値の表示を更新しています。下段のテキストフィールドはパスワードの入力などによく用いられる、入力を隠す設定になっています。

f:id:linkedsort:20211030183726p:plain:w400

コードのポイント

サンプルコード中のポイントを見ていきます。

(1) コントローラーの定義

//(1) このクラスにアプリ横断の状態変数を入れる
class Controller extends GetxController {
  var title = "".obs;
  var passCode = "".obs;
}

画面上部にある、TextFieldへの入力に応じてテキスト表示を更新する部分のためのコントローラ。

監視する変数についてはobsを付けて初期化していきます。

(1)(2)(3)(4)についてはGetXの仕組みを使いますので、不明な方はまずこちらをご覧ください。

(2) GetXを使う準備

  //(2) GetMaterialAppを使います
  return const GetMaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: '/',
    home: Home(),
  );

GetXを活用しますのでMaterialAppのところをGetMaterialAppにします。

(3) コントローラの登録

  //(3) コントローラを一回putで登録しておく
  var cntl = Get.put(Controller());

GetXによる状態管理を行いますので、コントローラを登録しておきます。

(4) 自動更新するウィジェットをObxで囲む

  //(4) 動的な数値を含む部分にはObx()でラップしておく
  Obx(()=>Text("入力値：${cntl.title}")),

テキスト入力に応じてcntl.titleが変化し、その変化に反応してTextウィジェットを更新するためObxで囲んでおきます。

(5) テキスト入力に対応する処理

    TextField(
      maxLength: 50,
      maxLines:1,
      decoration: const InputDecoration (
        icon: Icon(Icons.android),
        hintText: "いまどうしてる?",
        labelText: "tweet",
      ),
      onChanged: (String txt)=> cntl.title.value = txt,
    ),

こちらがTextFieldの実装になっています。

onChangedはテキストが入力されて状況が変化した場合に呼ばれるもので、現在入力されている文字列が引数として渡されます。これを利用して入力に応じた処理を記載します。

ここではコントローラのtitleの値に代入しています。この値が変化するたびに、上部のTextウィジェットが更新されるという仕組みです。

TextFieldの主なパラメタは以下のとおりです：

パラメタ名	意味
maxLength	最大文字数
maxLines	最大行数
decoration	フォント・色・アイコン等の装飾設定
obscureText	入力文字列を隠す
onChanged	変更時のコールバック関数