【Flutter初心者用】【コピペOK！】TextFieldに入力した値を取得しボタン押下で画面に表示するサンプルコード

今回はTextFieldに入力した値を取得しボタン押下で画面に表示する、という動きのサンプルとなっています。ユーザーの入力値の受け取りやボタン押下で動きを持たせるなど、Flutterアプリ開発の基本のきの部分についての記事です。

この記事で分かること

✅TextFieldの入力値を受け取る方法
✅ボタン押下で入力値などのデータを画面表示する方法

目次

サンプル画面

サンプルコード

class _Sample_textfield extends State<Sample_textfield>{
  String text = "";
  String hyoji_text = "";

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text('サンプル')),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (value){
                text = value;
              },
            ),
            ElevatedButton(
              onPressed: (){
                setState(() {
                  hyoji_text = text;
                });
              },
              child: const Text('入力した内容の表示'),
            ),
            Text(hyoji_text)
          ]
        ),
      ),
    );
  }
}

実装手順と解説

①入力値および表示内容を格納する変数を定義

String text = "";//入力値受け取り用
String hyoji_text = "";//画面表示用

②「TextField」の「onChanged」プロパティでユーザーの入力値を格納

TextField(
    onChanged: (value){
        text = value;//入力があるたびにセット
    },
),

ここで、ユーザーからの入力値を「数字のみ」や「英数字と記号のみ」などのように指定する方法については以下を参照してください。

③ボタン押下時の「onPressed」プロパティで「setState()」を用いて表示用変数に値を格納

onPressed: (){
    setState(() {
        hyoji_text = text;//ボタン押下時にtextfieldの内容をセット
    });
},

「setState()」については以下を参照してみてください。

④「Text()」に表示用変数の値をセット

Text(hyoji_text)//画面に表示

おわりに

今回はFlutterのTextFieldで、入力値を取得し、画面に表示する方法についてまとめました。Flutterアプリ開発の基本なのでこの機会にぜひ覚えておきましょう！

最後までお読みいただきありがとうございました！