Getting the value of a Text Field on Demand in Flutter

In our previous example, we saw how to get the text field value when we the field was changing, but what about if we want to get it on demand, like when we press a button?

Turns out, it is a similar process as to what we just did.

The FloatingActionButton

First, in our app we are going to add a FloatingActionButton. This is the button that the default adds automatically, and is displayed in the bottom right hand corner of our app. We could use an ElevatedButton if we wanted to, but we’re using this one instead.

It will be placed inside the scaffold of the app.

floatingActionButton: FloatingActionButton(
  // When the user presses the button, show an alert dialog containing the
  // text that the user has entered into the text field.
  onPressed: () {
    
  },
  tooltip: 'Show me the value!',
  child: Icon(Icons.text_fields),
);

Here we have set up the button, text as well as an appropriate icon for the button.

We’ve created an onPressed callback function, but we’ve not given it any info yet.

Creating an Alert Window

Now we’re going to create a pop up dialog window. This will be placed in the

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

Right now the text for the AlertDialog however is empty. This is because we need to define it. We might be tempted to put myController.text there, however it would be outside of our scope. So we have to do some finagling, either through using a global variable, or setting up additional event listeners to listen for the data.

For simplicity sake, we’re going to use a <shudder> global variable called alertText.

String alertText = '';

We needed to give it an initial, albeit empty, value because it is not nullable.

We will not put the alertText into the AlertDialog, where the text goes.

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

Finally, we will set alertText in the event listener function (_printUpdatedValue), so it is always updated.

void _printUpdatedValue() {
    // write text value to the console window
    print('Text field: ${myController.text}');
    // write the first text field value to the second text field
    myController2.text = myController.text;
    // update the alertText info
    alertText = myController.text;
  }

Now, this seems as if it should work. However, there is an issue that deals with Localization, which isn’t being used. I’m not sure if it is a bug, or there is something else hidden here at work.

The solution however, is to wrap the AlertDialog into a StatefulWidget. This eliminates the error.

So the MyApp class definition looks like the following, with the MyCustomForm.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Demo';

    return MaterialApp(
      title: appTitle,
      home: MyCustomForm(), // moved the content into a StatefulWidget
    );
  }
}

// The StatefulWidget and State which is necessary to make the AlertDialog work.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

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

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  String appTitle = "Form Demo";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: const MyForm(),
        floatingActionButton: FloatingActionButton(
          // When the user presses the button, show an alert dialog containing the
          // text that the user has entered into the text field.
          onPressed: () {
            print("Attempting to open dialog box");
            showDialog(
              context: context,
              builder: (context) {
                print("within builder");
                return AlertDialog(
                  // Retrieve the text the user has entered by using the
                  // TextEditingController.
                  content: Text(alertText),
                );
              },
            );
          },
          tooltip: 'Show me the value!',
          child: Icon(Icons.text_fields),
        ));
  }
}

Getting the value of a Text Field on Demand in Flutter was originally found on Access 2 Learn