Change the state of modal bottom sheet without button press

Question

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?

Answer 1

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

Answer 2

    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.