Udemyセール開催中! 対象コースが1,220円から

【Flutter】TextFieldの入力フォームの値を取得する

今回はFlutter docsのCookbookを参考に、TextFieldやTextFormFieldの入力フォームの値を取得する方法を紹介します。

目次

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

1番下の完成コードを参考にしながら読んでみて下さい。

ステップ1:TextEditingControllerを作る

//ステップ1
final valueController = TextEditingController();

今回はTextEditingControllerを「valueController」として作ります。

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

//ステップ2
child: TextField(
  controller: valueController,
),

TextFieldのcontrollerプロパティに作ったTextEditingController(valueController)を連携させます。

ステップ3: 入力テキストを取得する

//ステップ3
floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () {
    print(valueController.text);
  },
),

TextEditingControllerのtextメソッドを使って入力テキストの値を取得できます。

完成コード

下記コードをDartPadで実行できます。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //ステップ1
  final valueController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                //ステップ2
                child: TextField(
                  controller: valueController,
                ),
              ),
            ],
          ),
        ),
        //ステップ3
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print(valueController.text);
          },
        ),
      ),
    );
  }
}

以上です。

参考

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