Flutter中TextField数据已保存但返回页面后不显示问题求助

Hey there! I see exactly what's going on here. Your eventname variable is getting the input value saved correctly, but your TextFormField isn't set up to display that saved value when you navigate back to the page. Let's fix this quickly!

The Root Cause #

Right now, you're only storing the input into eventname via the onSaved callback, but the TextFormField has no idea it should use that eventname value as its starting point when the page rebuilds (which happens when you navigate back). It defaults to an empty state every time the widget re-renders, even though your data is safely stored.

Solution 1: Use initialValue (Quick & Simple) #

This is the fastest fix if you don't need to dynamically update the field's value while the page is active. Just add the initialValue parameter to your TextFormField, pointing directly to your eventname variable:

Container( 
  margin: EdgeInsets.only(top: 20), 
  width: 360, 
  child: Form( 
    autovalidateMode: AutovalidateMode.always, 
    onChanged: () { 
      Form.of(primaryFocus.context).save(); 
    }, 
    child: TextFormField( 
      // Add this line to bind the saved value
      initialValue: eventname,
      decoration: new InputDecoration( 
        labelText: "Event Name", 
        fillColor: Colors.white, 
        border: new OutlineInputBorder( 
          borderRadius: new BorderRadius.circular(25.0), 
          borderSide: new BorderSide(), 
        ), 
      ), 
      validator: (val) { 
        if (val?.length == 0) { 
          return "Event Name cannot be empty"; 
        } else { 
          return null; 
        } 
      }, 
      onSaved: (String? value) { 
        eventname = value ?? ""; 
      }, 
      style: new TextStyle( 
        fontFamily: "Poppins", 
      )
    )
  )
)

Note: Make sure eventname is a state variable (defined in your State class and updated with setState if needed) so the widget rebuilds when its value changes.

Solution 2: Use TextEditingController (Better for Dynamic Updates) #

If you need to modify the field's value programmatically later (or prefer a more flexible approach), using a TextEditingController is the way to go:

1. Define the controller in your State class:

class YourPageState extends State<YourPage> {
  late TextEditingController _eventNameController;
  String eventname = "";

  @override
  void initState() {
    super.initState();
    // Initialize the controller with your saved eventname
    _eventNameController = TextEditingController(text: eventname);
  }

  @override
  void dispose() {
    // Clean up the controller to avoid memory leaks
    _eventNameController.dispose();
    super.dispose();
  }

  // Rest of your state code...
}

2. Update your TextFormField to use the controller:

Container( 
  margin: EdgeInsets.only(top: 20), 
  width: 360, 
  child: Form( 
    autovalidateMode: AutovalidateMode.always, 
    onChanged: () { 
      Form.of(primaryFocus.context).save(); 
    }, 
    child: TextFormField( 
      // Replace initialValue with the controller
      controller: _eventNameController,
      decoration: new InputDecoration( 
        labelText: "Event Name", 
        fillColor: Colors.white, 
        border: new OutlineInputBorder( 
          borderRadius: new BorderRadius.circular(25.0), 
          borderSide: new BorderSide(), 
        ), 
      ), 
      validator: (val) { 
        if (val?.length == 0) { 
          return "Event Name cannot be empty"; 
        } else { 
          return null; 
        } 
      }, 
      onSaved: (String? value) { 
        eventname = _eventNameController.text; // Sync with controller value
      }, 
      style: new TextStyle( 
        fontFamily: "Poppins", 
      )
    )
  )
)

Why This Works #

When you navigate back to the page, the widget rebuilds. With either initialValue or TextEditingController, the TextFormField will now pull the saved eventname value and display it, instead of starting from an empty state.

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