Retrieve value from Text Field

in this article, i will share about How to Retrieve value from Text Field with Flutter.

Register Form, After Input Username and Press Submit Button Will show Dialog

Full Code :

import 'package:flutter/material.dart';

//string a = 1;


class Page1 extends StatelessWidget {

  TextEditingController etUsername = new TextEditingController();
  @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'
              ),
            ),

            //notification widget
            //toast
            //alert dialog
            //snack bar

            Container(
              alignment: Alignment.centerRight,
              child: MaterialButton(onPressed: (){
                return showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      // Retrieve the text the that user has entered by using the
                      // TextEditingController.
                      content: Text(etUsername.text),//menampilkan object ke text
                    );
                  },
                );
              },
                color: Colors.orange,
                textColor: Colors.white,
                child: Text('Submit'),
              ),

            ),

          ],
        ),
      ),
    );
  }
}

Explanation :

for get value from text field, we need text editing controller. We must declare it early

TextEditingController etUsername = new TextEditingController();

and then, we call that editing controller in contoller text field like this

TextFormField(
  controller: etUsername,
  decoration: InputDecoration(
      hintText: 'Input Username'
  ),
),

After that when press submit button, we will get that value and show it to Alert Dialog.

return showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      // Retrieve the text the that user has entered by using the
      // TextEditingController.
      content: Text(etUsername.text),//show object to text
    );
  },
);

code for get value from text field is like this

etUsername.text

Next Step we will learn how to Show two widgets in alert dialog. Please check here!