How to update the text color on screen by selecting color from bottomsheet in Flutter?

Question

Hello,
I'm creating an application from a T-Shirt designing. I need to change text color according to the user selection

The problem is that the text on the shirt is in draggable Widget(code attached) and when I select a color from BottomSheet(code attached) then the value is print but the text color is not changed until I touch the text on the screen. Is it possible to update the text color every time I change the color from bottom sheet.
Please help!!

  showBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          color: Colors.grey[200],
          height: 300,
          child: StatefulBuilder(builder: (BuildContext context,
              StateSetter setStates /*You can rename this!*/) {
            return Padding(
              padding: const EdgeInsets.all(15.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  // Text("Select Text Color"),
                      InkWell(
                          onTap: () {
                            clr = Colors.grey;
                            setStates((){
                               color =clr;
                            });

                            print(clr);
                            Navigator.pop(context);
                          },
                          child: Container(
                            decoration: BoxDecoration(
                                    color: Colors.black,
                                    borderRadius: BorderRadius.circular(40),
                                  ),
                            child: Icon(Icons.brightness_1,
                                size: 60, color: Colors.grey),
                          )),
                ],
              ),
            );
          }),
        );
      });



                        Draggable(
                            feedback: Container(
                                padding: EdgeInsets.all(10),

                                child: Material(
                                  type: MaterialType.transparency,
                                  child: Text(
                                    name,
                                    style: TextStyle(fontSize: 30,color: color),
                                  ),
                                )),
                            child: Container(
                                padding: EdgeInsets.all(10),
                                child: Text(
                                  name,
                                  style: TextStyle(fontSize: 30,color: color),
                                )),
                            childWhenDragging: Container(),
                            onDragEnd: (DraggableDetails d) {
                              setState(() {
                                pos[0].setPosition(d.offset.dx, d.offset.dy);
                              });
                            },
                          ),

Answer 1

Move your StatefulBuilder above in your widget tree, then passes the StateSetter to the function calling the showBottomSheet

for example :

 Widget buildBody(context){
    return Container(
      child: StatefulBuilder( builder: (BuildContext context, StateSetter setstates){
        return Column(
          children: <Widget>[
            FlatButton(
              child: Text('open bottom sheet'),
              onPressed: () {
                showbt(context, setstates);
              },
            ),
            Draggable(
              feedback: Container(
                  padding: EdgeInsets.all(10),
                  child: Material(
                    type: MaterialType.transparency,
                    child: Text(
                      'name',
                      style: TextStyle(fontSize: 30, color: color),
                    ),
                  )),
              child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text(
                    'name',
                    style: TextStyle(fontSize: 30, color: color),
                  )),
              childWhenDragging: Container(),
              onDragEnd: (DraggableDetails d) {
                setState(() {
                  //pos[0].setPosition(d.offset.dx, d.offset.dy);
                });
              },
            ),
          ],
        );
      },
      ),
    );
  }

the showbt code :

void showbt(context, setstates) {
    showBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            color: Colors.grey[200],
            height: 300,
            child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    // Text("Select Text Color"),
                    InkWell(
                        onTap: () {
                          setstates(() {
                            color = Colors.grey;
                          });

                          print('color : ');

                          print(color);
                          Navigator.pop(context);
                        },
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.circular(40),
                          ),
                          child: Icon(Icons.brightness_1,
                              size: 60, color: Colors.grey),
                        )),
                  ],
                ),
              ),
          );
        });
  }