Search code examples
flutterdarttext

How to change text field text value after popping from bottom sheet


My code show the bottom sheet widget when the text field is clicked. The bottom sheet has some button which clicked upon and saved pops the bottom sheet. However, after popping it gets the value but does not change the text field text to that value.

My code:

  Widget _additionInformation() {
    TextEditingController statusController = TextEditingController();
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            onTap: () {
              showModalBottomSheet(
                  context: context,
                  isScrollControlled: false,
                  isDismissible: false,
                  builder: (context) => BottomSheetSettingWidget(
                      ['None', 'Yes', 'No'])).then((value) {
                setState(() {
                  print(value);
                  statusController.text = value;
                });
              });
            },
            controller: statusController,
            decoration: InputDecoration(
              fillColor: Colors.white,
              filled: true,
              contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey[400])),
              border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey[400])),
            ),
          ),
          
        ],
      ),
    );
  }

Solution

  • Pass context and a controller as a parameter to the _additionInformation` widget you created, I added a demo code below:

    Widget _additionInformation(BuildContext context) {
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                onTap: () {
                  showModalBottomSheet(
                      context: context,
                      isScrollControlled: false,
                      isDismissible: false,
                      builder: (context) => BottomSheetSettingWidget(
                          ['None', 'Yes', 'No'])).then((value) {
                      print(value);
                      statusController.text = value;
                  });
                },
                controller: statusController,
                decoration: InputDecoration(
                  fillColor: Colors.white,
                  filled: true,
                  contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey[400])),
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey[400])),
                ),
              ),
              
            ],
          ),
        );
      }
    

    After doing that, create a TextEditingController in your ProfileEditPage. Like TextEditingController statusController = TextEditingController();

    Voila!! Happy Coding :)