fluttersetstatebottom-sheet

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

  • See Example suggested by yy1300326388 in this GitHub comment:

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