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

Question

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 :)

Comments

[javachipper]

place the setState after popping the showModalBottomSheet

[iKreateCode]

I think that is what i have done. When the bottom sheet pops then it sets the state

[javachipper]

you've placed it after BottomSheetSettingWidget

[iKreateCode]

I have placed it after the bottom sheet because the last bracket after the .then is part of the bottom sheet

[javachipper]

My bad, didn't clearly saw it before. Try placing await before showModalBottomSheet

[void]

What is the point of using an await when you have a .then ? @javachipper That doesn't sound right.

[javachipper]

@TimilehinJegede await is meant to interrupt the process flow until the async method has finished. then however does not interrupt the process flow (meaning the next instructions will be executed) but enables you to run code when the async method is finished. check this thread for more info : stackoverflow.com/questions/54515186/…

[javachipper]

it works just fine with just the textformfield and the widget. I'm afraid the problem might be the parent widget of the textformfield.

[void]

Your code works fine and produces the intended result @iKreateCode, you might want to try a hot restart or kill and run again :)

[iKreateCode]

@TimilehinJegede I done that and still does not work?

[iKreateCode]

@javachipper what do you mean by that, i have this code in a widget method which is called in the build if that helps

[void]

Can I see where you initialised the statusController ? @iKreateCode

[iKreateCode]

@TimilehinJegede i updated my code that shows the entire widget method. Thats where the controller is initialised

[void]

Permit me @iKreateCode, where is the showModalBottomSheet getting it's context from?

[iKreateCode]

@TimilehinJegede Im new to flutter but upon clicking on context it redirects me to dart's own framework file. Could you please make this into a discussion, my rep does not allow me to. Thanks

[void]

I don't think I can do that @iKreateCode. I just need to know how you are getting the context in widget _additionInformation

[iKreateCode]

@TimilehinJegede it is not getting it from anywhere it is just declared. I think that is the issue because i tried it in my build without called the method and it worked. So i think to make it work i should pass context as a parameter

[void]

Yes do that, I added a code to show how to @iKreateCode

[iKreateCode]

Passing it as a param didnt work too but it works in my build

[void]

Can you create a github gist for me to check the code ? @iKreateCode. The problem is definitely coming from how you called the method additionInformation . I'll take a look at the gist and update my answer here.

[iKreateCode]

gist.github.com/iKreateCode/3fe07b1449471835acb756a22e739643

[void]

Fixed it. @iKreateCode, I updated my answer. The issue was with the controller, pass it as a parameter and define one in your ProfileEditPageState.

[iKreateCode]

That worked. But wouldn't the parameters be really long if i included more bottom widgets in the same method?

[void]

You can just create the controllers as instance variables and use them directly in the widget instead of passing as parameters @iKreateCode. Check my updated answer for an example.