BottomSheet value does not update using button flutter

user_9931959 0
Viewed 895

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,
          ),
        ),
      ),
    );
  }
}
bottom-sheet statefulwidget flutter button
2 Answers

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

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