BottomSheet value does not update using button flutter - 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,
),
),
),
);
}
}

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

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