BottomSheet value does not update using button flutter

Question

I have a Bottom Sheet which has sets of buttons. I use the buttons to change the value of pinString and a text to show the pinString. The value of the text does not update when button is clicked. How to fix this

  showNumberPad(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return StatefulBuilder(builder: (context, setState) {
          return Container(
            height: 550.0,
            child: Column(
              children: <Widget>[
                Text(
                  "$pinString",
                ),
                KeyboardNumber(
                  n: 1,
                  onPressed: () {
                     pinIndexSetup("1");
                     setState1() {
                       pinString = "New Pin";
                     }
                  },
                ),
              ],
            ),
          );
        });
      },
    );
  }

KeyboardNumber is a custom Stateful widget where I want to pass the onPressed as a parameter. Code for keyboardNumber:

class KeyboardNumber extends StatefulWidget {
  final int n;
  final onPressed;

  const KeyboardNumber({Key key, this.n, this.onPressed}) : super(key: key);

  @override
  _KeyboardNumberState createState() => _KeyboardNumberState();
}

class _KeyboardNumberState extends State<KeyboardNumber> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60.0,
      height: 60.0,
      decoration: BoxDecoration(
        color: teal2,
        borderRadius: BorderRadius.all(
          Radius.circular(10),
        ),
      ),
      alignment: Alignment.center,
      child: FlatButton(
        padding: EdgeInsets.all(8.0),
        onPressed: widget.onPressed,
        height: 90.0,
        child: Text(
          "${widget.n}",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 16,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Solution 1

you define pinString in another state and change it in bottomeSheet state, you must define it in this line :

    showModalBottomSheet(
      context: context,
      builder: (context) {
        String pinString = 'hi';
        return StatefulBuilder(builder: (BuildContext context, StateSetter setState){
          return Container(
            height: 550.0,
            child: Column(
              children: <Widget>[
                Text(
                  "$pinString",
                ),
                FlatButton(
                  child: Text("Update"),
                  onPressed: () {
                    setState(() => pinString = 'new');
                  },
                ),
              ],
            ),
          );
        });
      },
    );
  }

Solution 2

Please note that the new setState will override your main widget setState but sure you can just rename it so you would be able to set state of your parent widget and the modal's

Here is the updated code.

showNumberPad(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return StatefulBuilder(builder: (context, SetState1) {
          return Container(
            height: 550.0,
            child: Column(
              children: <Widget>[
                Text(
                  "$pinString",
                ),
                FlatButton(
                  child: Text("Update"),
                  onPressed: () {
                    SetState1(() {
                      pinString = "New Pin";
                    });
                  },
                ),
              ],
            ),
          );
        });
      },
    );
  }

Comments

[Nehal]

This error shows up ``` The declaration 'setState' isn't referenced. Try removing the declaration of 'setState'. ```

[Nastaran Mohammadi]

I test it and do the trick with no error, what is your flutter version

[Urvish Patel]

@Nehal Please check my answer. I tested it and its working.

[Yahya Parvar]

@Nehal The declaration 'setState' isn't referenced. shows up because you're trying to call setState in an stateless widget ,make sure you are using stateful, check out this article stackoverflow.com/questions/49597189/…

[Nehal]

Instead of FlatButton I use a custom Widget, it shows the same error "The declaration 'setState1' isn't referenced. Try removing the declaration of 'setState1'"

[Nehal]

Instead of FlatButton I use a custom Widget, it shows the same error "The declaration 'setState1' isn't referenced. Try removing the declaration of 'setState1'". I have updated my question