Flutter で StatefullWidget を利用して入力したテキストを表示する方法についてまとめていきます。

TextField 　の onChanged イベントを利用する

サンプルコードは以下の通りです。わかりやすくするために装飾は簡単にしています。

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'TextField Demo',
      home: TextFieldPage(),
    );
  }
}
 
class TextFieldPage extends StatefulWidget {
  const TextFieldPage({super.key});
 
  @override
  State<TextFieldPage> createState() => _TextFieldPageState();
}
 
class _TextFieldPageState extends State<TextFieldPage> {
  String _text = '';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
        　// 入力フォーム
          TextField(
            onChanged: (String value) {
              setState(() {
                _text = value;
              });
            },
          ),
          // 入力したテキストを表示
          Text(_text),
        ],
      ),
    );
  }
}

TextFieldの onChanged イベントで入力したテキストを_textにセットし、Textで表示しています。

TextEditingController の addListener を利用する

TextInputController にリスナーを登録し、親ウィジェットの状態を更新することで、Text Widget に入力したテキストを表示しています。

class _TextFieldPageState extends State<TextFieldPage> {
  String _text = '';
  final _controller = TextEditingController();　　// 1. TextEditingControllerをインスタンス化
 
  @override
  void initState() {
    super.initState();
    _controller.addListener(() { // 2. リスナーを登録
      setState(() {
        _text = _controller.value.text;
      });
    });
  }
 
  @override
  void dispose() {
    _controller.dispose();  // 3. disposeでリスナーを解除
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('テキスト入力'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: _controller, // 4. TextFieldにcontroller登録
          ),
          Text(_text),
        ],
      ),
    );
  }
}