This is a modal bottom sheet in flutter, and I want the Queue No.xxx to update automatically in real time, I'm fetching an API in the background to get the latest queue, but when i call set state it doesn't change the number in the bottom sheet.
Alternatively, I built the modal bottom sheet with a stateful builder and added a refresh button to manually update the number.
But I still want to know, is it possible to add a automatic countdown label in a modal bottom sheet?
Please refer to below example code on how to update value from Modal Sheet
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final StreamController _myStreamCtrl = StreamController.broadcast();
Stream get onVariableChanged => _myStreamCtrl.stream;
void updateMyUI() => _myStreamCtrl.sink.add(myNum);
bool mpesachecked;
final ValueNotifier<List> myNum = ValueNotifier<List>([]);
@override
void initState() {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ValueListenableBuilder(
child: Text('Values'),
builder: (BuildContext context, List value, Widget child) {
return ListView.builder(
itemCount: value.length,
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text('${index + 1}'),
Text((value.length > 0) ? '${value[index]}' : 'Nothing'),
child,
],
);
});
},
valueListenable: myNum,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_modalBottomSheetMenu();
},
child: Icon(Icons.add),
),
);
}
void _modalBottomSheetMenu() {
showModalBottomSheet(
context: context,
builder: (builder) {
{
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: [
StreamBuilder(
stream: onVariableChanged,
builder: (context, snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
updateMyUI();
return Text(". . .");
}
return Text(snapshot.data.value.toString());
},
),
RaisedButton(
child: Text("Increment"),
onPressed: () {
myNum.value.add(Random().nextInt(1000).toString());
updateMyUI();
myNum.notifyListeners();
},
),
],
),
],
),
);
});
}
}
showMaterialModalBottomSheet(
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
isDismissible: false,
enableDrag: false,
context: context,
builder: (context){
return StatefulBuilder(builder: (BuildContext context, StateSetter setSheetState ) {
sheetTimer = Timer.periodic(Duration(seconds: 1), (timer) { setSheetState(() {
queuePositon = queuePositon;
});});
return Container(child:Text("${queuePosition}"))
In the end, I put a timer in a stateful bottom sheet to constantly update the queue position.