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])),
            ),
          ),
          
        ],
      ),
    );
  }

I think that is what i have done. When the bottom sheet pops then it sets the state — iKreateCode, Jul 11 '20 at 14:40
I have placed it after the bottom sheet because the last bracket after the .then is part of the bottom sheet — iKreateCode, Jul 11 '20 at 14:44
My bad, didn't clearly saw it before. Try placing await before showModalBottomSheet — javachipper, Jul 11 '20 at 14:48
What is the point of using an `await` when you have a `.then` ? @javachipper That doesn't sound right. — void, Jul 11 '20 at 15:29
@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 : https://stackoverflow.com/questions/54515186/async-await-then-in-dart-flutter — javachipper, Jul 11 '20 at 15:31
it works just fine with just the textformfield and the widget. I'm afraid the problem might be the parent widget of the textformfield. — javachipper, Jul 11 '20 at 15:44
Your code works fine and produces the intended result @iKreateCode, you might want to try a `hot restart` or kill and run again :) — void, Jul 11 '20 at 15:45
@javachipper what do you mean by that, i have this code in a widget method which is called in the build if that helps — iKreateCode, Jul 11 '20 at 15:50
Can I see where you initialised the `statusController` ? @iKreateCode — void, Jul 11 '20 at 15:55
@TimilehinJegede i updated my code that shows the entire widget method. Thats where the controller is initialised — iKreateCode, Jul 11 '20 at 15:59
Permit me @iKreateCode, where is the `showModalBottomSheet` getting it's `context` from? — void, Jul 11 '20 at 16:05
@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 — iKreateCode, Jul 11 '20 at 16:10
I don't think I can do that @iKreateCode. I just need to know how you are getting the `context` in widget `_additionInformation` — void, Jul 11 '20 at 16:17
@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 — iKreateCode, Jul 11 '20 at 16:23

void · Accepted Answer · 2020-07-11T17:44:06.703

0

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

edited Jul 11 '20 at 17:44

answered Jul 11 '20 at 16:25

void

12,787
3
28
42

Passing it as a param didnt work too but it works in my build – iKreateCode Jul 11 '20 at 16:27
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. – void Jul 11 '20 at 16:36
https://gist.github.com/iKreateCode/3fe07b1449471835acb756a22e739643 – iKreateCode Jul 11 '20 at 16:55
Fixed it. @iKreateCode, I updated my answer. The issue was with the `controller`, pass it as a parameter and define one in your `ProfileEditPageState`. – void Jul 11 '20 at 17:23
That worked. But wouldn't the parameters be really long if i included more bottom widgets in the same method? – iKreateCode Jul 11 '20 at 17:28
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. – void Jul 11 '20 at 17:42

score 0 · Answer 2 · answered Dec 14 '21 at 19:37

showModalBottomSheet(
    context: context,
    builder: (context) {
      return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {
        return Container(
          height: heightOfModalBottomSheet,
          child: RaisedButton(onPressed: () {
            setState(() {
              heightOfModalBottomSheet += 10;
            });
          }),
        );
      });
});

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

2 Answers2