'Flutter set state not updating variable value in bottomsheet function
I have a button where on click I call the following function which creates a bottomsheet below.What happens is that it builds a list of cards based on a list array value. Then one of the cards I want to update its value based on the onTap gesture. I notice it detects the gesture but does not update its value. Above all I have a global variable defined as
String _localPNumberSelected="";
In the onTap I call setState
setState(() {
_localPNumberSelected=vList[index]["pNumber"].toString();
});
but this does not update
children: [
new Text('$_localPNumberSelected'),
],
Here is the full codes.
void _callQuickListModalBottomSheet(context){
Future<void> future = showModalBottomSheet<void>(
context: context,
builder: (BuildContext bc){
return Container(
height: 280,
margin: new EdgeInsets.fromLTRB(200, 0, 10, 0),
child : new Container(
decoration: new BoxDecoration(
color: Color.fromRGBO(36, 46, 66, 1),
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(20),
topRight: const Radius.circular(20)
),
),
child: new Column(
children: <Widget>[
new Container(
margin: new EdgeInsets.fromLTRB(10, 10, 10, 0),
height:45,
child: new Column(
children: <Widget>[
new Card(
color: Colors.white,
child: Row (
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
decoration: new BoxDecoration(
color: Colors.green,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(5),
bottomLeft: const Radius.circular(5)
),
),
child: Icon(Icons.check, size: 20.0),
height: 27,
width: 30,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
new Text('$_localPNumberSelected'),
],
),
],
)
)
]
)
),
new Container(
height:190,
child:
new ListView.builder(
shrinkWrap: true,
itemCount: vehicleListdata.length,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
width: 30.0,
height: 35.0,
child: Card(
color: Colors.white,
child: Row (
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
decoration: new BoxDecoration(
color: Colors.amber,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(5),
bottomLeft: const Radius.circular(5)
),
),
height: 27,
width: 10,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
new GestureDetector(
onTap: () {
setState(() {
_localPNumberSelected=vList[index]["pNumber"].toString();
});
doSomething(vList[index]["pNumber"].toString());
},
child:new Text(vList[index]["pNumber"].toString()),
),
],
),
],
),
)
);
}
)
)
],
),
)
);
}
);
future.then((void value) => _closeModal(value));
}
Solution 1:[1]
See Example
String update = 'Oya Update Jhoor';
void locationSheet() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context,state){
return Center(
child: FlatButton(
onPressed: () {
updated(state);
},
child: new Text('$update')),
);
});
});
}
Future<Null> updated(StateSetter updateState) async {
updateState(() {
update = 'Update Leekan si';
});
}
Solution 2:[2]
showModalBottomSheet doesn't rebuild itself when you use setState. If you want to change values inside a bottomSheet after you have built it, you are going to need to implement your own version of bottomSheet (just create a stateful widget that behaves the same way)
Solution 3:[3]
You could simply return a stateful builder that in turn returns the widget you are trying to call.
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;
});
}),
);
});
});
https://www.codegrepper.com/code-examples/whatever/how+to+change+state+of+Bottomsheet+in+flutter
Link to Original Answer - ShahbazAli (Nov 05 2020).
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Serl |
| Solution 3 | Johnpaul Muoneme |