Flutter中AlertDialog向当前页面传递数据的问题咨询

Let's tackle your problem step by step, starting with getting that dialog input to show up in your main page's "Paste here!" text, then answering each of your technical questions.

Core Fix: Get Dialog Data to Your Main State #

Your main issue is that you weren't returning the input data from the dialog or updating your main page's state to display it. Here's the modified code with key changes:

1. Update Your Main State to Store Display Text #

Add a state variable in _MyHomePageState to hold the text you want to show:

class _MyHomePageState extends State<MyHomePage> {
  String _displayText = "Paste here!"; // Add this variable

  // ... rest of your code
}

2. Modify the Dialog to Return Input Data #

Rewrite the showInformationDialog function to return the input text (and get rid of that global _formKey—it's a recipe for bugs with multiple dialogs):

Future<String?> showInformationDialog(BuildContext context) async {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final TextEditingController _testEE = TextEditingController();
  bool isChecked = false;

  return await showDialog<String?>(
    context: context,
    builder: (context) {
      return StatefulBuilder(builder: (context, setState) {
        return AlertDialog(
          content: Form(
            key: _formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextFormField(
                  controller: _testEE,
                  validator: (value) {
                    return value?.isNotEmpty == true ? null : "Invalid Field";
                  },
                  decoration: const InputDecoration(hintText: "Enter text"),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text("Choice"),
                    Checkbox(
                      value: isChecked,
                      onChanged: (checked) {
                        setState(() {
                          isChecked = checked ?? false;
                        });
                      },
                    )
                  ],
                )
              ],
            ),
          ),
          actions: <Widget>[
            // Add a Cancel button for better UX
            TextButton(
              child: const Text("Cancel"),
              onPressed: () {
                Navigator.of(context).pop(null); // Return null when cancelled
              },
            ),
            TextButton(
              child: const Text("Okay"),
              onPressed: () {
                if (_formKey.currentState?.validate() == true) {
                  // Close dialog and pass back the input text
                  Navigator.of(context).pop(_testEE.text);
                }
              },
            ),
          ],
        );
      });
    },
  );
}

3. Receive Data and Update State in the Add Button #

Update the Add button's onPressed to await the dialog result and update your display text:

onPressed: () async {
  final inputResult = await showInformationDialog(context);
  if (inputResult != null) {
    setState(() {
      _displayText = inputResult;
    });
  }
},

4. Use the State Variable in Your Text Widget #

Replace the hardcoded "Paste here!" text with your state variable:

Padding(
  padding: const EdgeInsets.only(top: 5.0),
  child: Text(_displayText, style: const TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontWeight: FontWeight.bold,
      fontSize: 15.0)),
),

Answers to Your Technical Questions #

1. Is using AlertDialog the right solution here? #

Absolutely! AlertDialog is perfect for this scenario—it's Flutter's standard component for simple, modal input prompts. It's lightweight, fits the "ask for quick input and close" use case perfectly, and requires no extra setup beyond what you already have. You'd only need a custom dialog (like a BottomSheet or full-screen widget) if your input form was significantly more complex.

2. What's the correct way to pass and display input data? Do I need arrays/stacks? #

You don't need arrays or stacks for basic one-time data transfer like this. The most idiomatic Flutter approach is to return data when popping the dialog (as we did with Navigator.of(context).pop(_testEE.text)).

Since showDialog returns a Future, you can await it in your main state to get the data back, then use setState to update your display text. Arrays would only make sense if you wanted to store a history of all past inputs—for just showing the latest entry, a single string variable is all you need.

3. Should I put logic in the _MyHomePage class? Does it matter? #

It's best to avoid global functions (like your original showInformationDialog) because they can cause state conflicts (e.g., if you open multiple dialogs, a global _formKey would be shared between them).

Instead, you can:

• Move showInformationDialog into your _MyHomePageState class as a helper method (keeps related code together)
• Or create a separate utility function/class (just make sure keys and controllers are local to each dialog instance, not global)

Keeping logic tied to the relevant state class makes your code more organized and avoids unexpected side effects. It's not strictly required, but it's a best practice for maintainability.

4. Should I use custom components from other files for the dialog? #

Yes, definitely! Splitting reusable components into separate files cleans up your main page code and lets you reuse the dialog elsewhere in your app.

For example, you could create a custom_input_dialog.dart file with a reusable showCustomInputDialog function (like the modified dialog we wrote earlier). Then import that file in your main page and call it just like before. This keeps your main page focused on its core UI structure, not the dialog's internal logic.

内容的提问来源于stack exchange，提问作者user14584183