如何通过从 Flutter 的底部表中选择颜色来更新屏幕上的文本颜色？

Question

你好,
我正在从 T 恤设计中创建一个应用程序。我需要根据用户更改文本颜色 selection

问题是衬衫上的文字是可拖动的小部件（附代码），当我 select 来自 BottomSheet（附代码）的颜色时，值是打印的，但是在我触摸屏幕上的文字之前，文字颜色不会改变。每次从底部 sheet 更改颜色时，是否可以更新文本颜色？
请帮忙！！

  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

将 StatefulBuilder 移动到小部件树的上方，然后将 StateSetter 传递给调用 showBottomSheet

的函数

例如：

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

showbt 代码：

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