Retrieve Value from Text Field to Widget Text

Hello Every one, in this article i will talk about how to retrieve data from text field and then show in widget text

Full Code :

import 'package:flutter/material.dart';


class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  TextEditingController etUsername = new TextEditingController();
  TextEditingController etPassword = new TextEditingController();

  String nUsername = "";
  String nPassword = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('Page 1'),
      ),

      body: Form(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 35.0),
            ),

            Text('Register Form',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0),),

            TextFormField(
              controller: etUsername,
              decoration: InputDecoration(
                  hintText: 'Input Username'
              ),
            ),
            TextFormField(
              controller: etPassword,
              obscureText: true,
              decoration: InputDecoration(
                  hintText: 'Input Password'
              ),
            ),

           

            Container(
              alignment: Alignment.centerRight,
              child: MaterialButton(onPressed: () {
                setState(() {
                  nUsername = etUsername.text;
                  nPassword = etPassword.text;
                });
              },
                color: Colors.orange,
                textColor: Colors.white,
                child: Text('Submit'),
              ),

            ),

            Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(left: 120.0),
              child: Row(
                children: <Widget>[
                  Text("Hi, Your Name is :   " + nUsername),
                ],
              ),
            ),

            Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(left: 120.0),
              child: Row(
                children: <Widget>[
                  Text("Your Password is : " + nPassword),
                ],
              ),
            ),

          ],
        ),
      ),
    );

Explanation :

Before we retrieve data from text field widget to text, we need to put and declare several string variable

String nUsername = "";
String nPassword = "";

And then, we user press button submit, we add set state and set the value of string to get that value from widget edit text

setState(() {
                  nUsername = etUsername.text;
                  nPassword = etPassword.text;
});

After set value each of string, we can call it and set in widget text

Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(left: 120.0),
              child: Row(
                children: <Widget>[
                  Text("Hi, Your Name is :   " + nUsername),
                ],
              ),
            ),

            Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(left: 120.0),
              child: Row(
                children: <Widget>[
                  Text("Your Password is : " + nPassword),
                ],
              ),
            ),

Thanks. Enjoy it :)