2

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,
          ),
        ),
      ),
    );
  }
}
Nehal
  • 1,261
  • 12
  • 18

2 Answers2

2

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');
                  },
                ),
              ],
            ),
          );
        });
      },
    );
  }
  • This error shows up ``` The declaration 'setState' isn't referenced. Try removing the declaration of 'setState'. ``` – Nehal Jan 12 '21 at 15:30
  • I test it and do the trick with no error, what is your flutter version – Nastaran Mohammadi Jan 12 '21 at 15:35
  • @Nehal Please check my answer. I tested it and its working. – Urvish Patel Jan 12 '21 at 15:39
  • @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 https://stackoverflow.com/questions/49597189/the-method-setstate-isnt-defined-for-the-class-myapp-error-in-flutter – Yaya Jan 13 '21 at 01:53
  • 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 – Nehal Jan 13 '21 at 06:42
1

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";
                    });
                  },
                ),
              ],
            ),
          );
        });
      },
    );
  }
Urvish Patel
  • 175
  • 1
  • 11
  • 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 Jan 13 '21 at 06:38