Show TextField value on same screen on button click

user_11224260 0
Viewed 5893

This is my screen with TextField and Button. When someone clicks on show button, I want it to show the name below the button as shown in below picture.

enter image description here enter image description here

Code below:


class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  final name = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  'Name'
                ),
                TextField(
                  controller: name,
                )
              ],
            ),
            RaisedButton(
              onPressed: (){

              },
              child: Text('Show'),
            )
          ],
        ),
      ),
    );
  }
}
dart flutter
3 Answers

This can be a basic example for your question. The UI is not exactly what you've shown above

class Question extends StatefulWidget {
  Question({Key key}) : super(key: key);

  @override
  _QuestionState createState() => _QuestionState();
}

class _QuestionState extends State<Question> {
  String text = '';
  bool shouldDisplay = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
          child: TextField(
            onChanged: (value) {
              setState(() {
                text = value;
              });
            },
          ),
        ),
        FlatButton(onPressed: () {
          setState(() {
            shouldDisplay = !shouldDisplay;
          });
        }, child: Text('Submit')),
        shouldDisplay ? Text(text) : Spacer()
      ],
    );
  }
}

Hope this helps.

user_135646020

Initialize two variables. One for a TextEditingController and one for the text value.

TextEditingController controller = TextEditingController();
String display = '';

Give your TextField a controller.

TextField(controller:controller);

In your button, set onPressed to change display text to the controller text.

FlatButton(
child: Text("Show"),
onPressed()=> setState((){display = controller.text;});
),

Then where you want to show the text, set the text string to display.

Text(display);
user_132692830

I would advice you to learn the basics of flutter first before asking these kinds of questions. This can be simply achieved through using TextEditingController and setState(). Simply define a controller for your TextField and then call setState() when your button is pressed. Note that you have to be on a StatefulWidget since calling setState() rebuilds the UI.

Create a TextEditingController and string above the @override Widget build:

  String displayName="";
  final myController = TextEditingController();

Create a TextField and add assign the controller to it:

TextField(
  controller: myController,
);

Call setState() on button pressed:

MaterialButton(
child: Text("Show"),
onPressed: (){
 setState(() {
  displayName=myController.text;
 });
})

Display it using a Text widget:

Text(displayName);

Good Luck! You can find out how to use TextEditingController here: https://flutter.dev/docs/cookbook/forms/retrieve-input

More about widgets here: https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

user_95227320
Related