[Flutter] TextField で文字入力、初期値、複数行などの設定

ユーザーの文字入力で使われるのが TexField です
また、文字入力を監視する TextEditingController を一緒に使うと何かと便利です

TextField

TextFieldで文字入力をするシンプルなコードはこのようになります

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          onChanged: (text) {
            debugPrint("text: $text");
          },
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: TextField(

onChanged: (text) {

debugPrint("text: $text");

);

}

DebugConsole に入力した文字列が表示されます

入力した文字列をTextで表示したりするためには
TextEditingController() を利用します

class _TestTextFieldState extends State<TestTextField> {
  final TextEditingController textEditCont = TextEditingController();

  @override
  void dispose() {
    // Classが破棄されるタイミングコントローラーも破棄する
    textEditCont.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: textEditCont,
            onChanged: (text) {
              setState(() {});  // Textがリビルドされるようにします
            },
          ),
          Text(
            textEditCont.text,
          ),
        ],
      ),
    );
  }
}

class _TestTextFieldState extends State<TestTextField> {

final TextEditingController textEditCont = TextEditingController();

@override

void dispose() {

// Classが破棄されるタイミングコントローラーも破棄する

textEditCont.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('TextField'),

body: Column(

children: <Widget>[

TextField(

controller: textEditCont,

onChanged: (text) {

setState(() {}); // Textがリビルドされるようにします

Text(

textEditCont.text,

);

}

目次
1. サンプルコード
2. 実行結果
3. その他の設定
　3.1 初期値
　3.2 複数行
　3.3 枠線
　3.4 日本語入力
　3.5 ヒント
　3.6 文字数制限

サンプルコード

まとめて、レイアウトを見やすくしてみます

main.dart

import 'package:flutter/material.dart';

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TestTextField(),
    );
  }
}

class TestTextField extends StatefulWidget {
  const TestTextField({super.key});
  @override
  State<TestTextField> createState() => _TestTextFieldState();
}

class _TestTextFieldState extends State<TestTextField> {
  final TextEditingController textEditCont = TextEditingController();

  @override
  void dispose() {
    // Classが破棄されるタイミングコントローラーも破棄する
    textEditCont.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextField'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: [
            TextField(
              controller: textEditCont,
              onChanged: (text) {
                setState(() {});  // Textがリビルドされるようにします
              },
            ),
            const SizedBox(height: 32),
            Text(
              textEditCont.text,
              style: const TextStyle(fontSize: 32),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return const MaterialApp(

home: TestTextField(),

);

}

class TestTextField extends StatefulWidget {

const TestTextField({super.key});

@override

State<TestTextField> createState() => _TestTextFieldState();

}

class _TestTextFieldState extends State<TestTextField> {

final TextEditingController textEditCont = TextEditingController();

@override

void dispose() {

// Classが破棄されるタイミングコントローラーも破棄する

textEditCont.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('TextField'),

body: Padding(

padding: const EdgeInsets.all(32.0),

child: Column(

children: [

TextField(

controller: textEditCont,

onChanged: (text) {

setState(() {}); // Textがリビルドされるようにします

const SizedBox(height: 32),

Text(

textEditCont.text,

style: const TextStyle(fontSize: 32),

);

}

実行結果

実行させてみると

アンダーライン上に入力欄ができて
そこに入力するためのキーボードが立ち上がります

入力文字は下段に大きめの文字列で表示されます

その他の設定

TextFieldでよくつかいそうな設定について
見てみたいと思います

初期値

入力欄にあらかじめ文字列、初期値を入れたいことはあると思います
TextEditingControllerに初期値を設定することでできます

class _TestTextFieldState extends State&lt;TestTextField&gt; {
  final TextEditingController textEditCont = TextEditingController(text: '初期値');
...
}

class _TestTextFieldState extends State<TestTextField> {

final TextEditingController textEditCont = TextEditingController(text: '初期値');

...

}

複数行

複数行にするには、keyboardType をマルチラインにして
maxLines をnullにするとできます

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
...
)

TextField(

keyboardType: TextInputType.multiline,

maxLines: null,

...

)

改行を入れて４行にできました

maxLines は、例えば３にすると３行で行数が制限される設定です

枠線

枠線を入れるには、OutlineInputBorder()を設定します

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
...
)

TextField(

decoration: InputDecoration(

border: OutlineInputBorder(),

...

)

枠線で囲まれました

日本語入力

TextFieldで日本語入力するしないは、端末次第です
なので、Localizationの設定などは、TextFieldでは必要ないです
（あくまで TextField での日本語キーボード入力について）

Androidのエミュレータを設定から日本語サポートにすると
日本語入力ができます
あるいは、日本語で使っている実機でも同じです

ヒント

先の初期値の設定ではなくヒントを初期画面に入れたい場合もあります
hintText を使います

TextField(
  decoration: const InputDecoration(
    hintText: 'ヒント',
  ),
  ...
),

TextField(

decoration: const InputDecoration(

hintText: 'ヒント',

...

ヒントなので、即その入力欄に書き込むことができます

文字数制限

文字数を制限したいことは時々あります
簡単な方法では、maxLength

TextField(
  maxLength: 12,
  ...
),

TextField(

maxLength: 12,

...

12文字からは受け付けません

References:
TextField class
TextEditingController class
Handle changes to a text field