【Flutter】TextFieldの入力値をTextEditingControllerで取得

今回はTextFieldまたはTextFormFieldの入力フォームの値を取得する方法を紹介します。

TextEditingControllerで入力フォームの値を取得していきます。

\ 世界最大級のオンライン学習サービス /

目次

TextFieldの入力フォームの値を取得する方法

TextFormFieldも同様なので今回はTextFieldで解説を進めていきます。全体のサンプルコードは記事下に載せてあります。

ステップ1:TextEditingControllerを生成

final myController = TextEditingController();

まずはTextEditingControllerfinalで定義します。

ステップ2:TextEditingControllerをTextFieldと連携

TextField(
  controller: myController,
),

先ほど生成したTextEditingControllerTextFieldcontrollerに渡します。

これでTextFieldの入力フォームで入力値が更新される度にTextEditingControllerで更新値を取得できます。

ステップ3: TextEditingControllerで入力値を取得

AlertDialog(
  content: Text(myController.text),
);

入力フォームの入力値はTextEditingControllertextでString型で取得できます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: CustomApp(),
    );
  }
}

class CustomApp extends StatefulWidget {
  const CustomApp({Key? key}) : super(key: key);

  @override
  State<CustomApp> createState() => _CustomAppState();
}

class _CustomAppState extends State<CustomApp> {
  final myController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlutterZerp'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                content: Text(myController.text),
              );
            },
          );
        },
        child: const Icon(Icons.text_fields),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次