我如何从外部类更改小部件的状态

Question

我创建了一个小部件按钮类，该类可调整大小并在单击时显示进度按钮。一段时间后，它将基于小部件类中的状态显示错误或成功消息。

这是三种不同的状态：

这是自定义进度按钮的来源：

class ProgressButton extends StatefulWidget {
  final VoidCallback onPressed;
  final int state;
  final String text;

  ProgressButton({
    Key key,
    this.text,
    this.state,
    this.onPressed,
  })  : assert(state >= 0),
        assert(text != null),
        super(key: key);

  @override
  _ProgressButtonState createState() => _ProgressButtonState();
}

class _ProgressButtonState extends State<ProgressButton>
    with TickerProviderStateMixin {
  static _ProgressButtonState of(BuildContext context) =>
      context.ancestorStateOfType(const TypeMatcher<_ProgressButtonState>());

  int state = 0;
  Animation _animation;
  double width = double.infinity;

  double unchangedInit = 0.0;

  double initialWidth = 0.0;

  GlobalKey globalKey = GlobalKey();

  String btnText = "";

  @override
  void initState() {
    super.initState();

    btnText = widget.text;
    state = widget.state;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      key: globalKey,
      height: 48.0,
      width: width,
      child: RaisedButton(
        padding: EdgeInsets.all(0.0),
        color:
            state == 2 ? Colors.green : state == 3 ? Colors.red : Colors.blue,
        shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(30.0),
        ),
        child: buildButtonChild(),
        onPressed: widget.onPressed,
      ),
    );
  }

  void animateButton() {
    unchangedInit = 411.42857142857144;

    initialWidth = globalKey.currentContext.size.width;

    var controller = AnimationController(
        duration: Duration(microseconds: 2000), vsync: this);
    _animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          width = initialWidth - ((initialWidth - 48.0) * _animation.value);
        });
      });

    controller.forward();

    setState(() {
      state = 1;
    });

    //Timer(Duration(milliseconds: 3300), () {
    //setState(() {
    //state = 3;
    //});
    //});
  }

  Widget buildButtonChild() {
    print(state);
    if (state == 0) {
      return Text(
        btnText,
        style: TextStyle(color: Colors.white, fontSize: 16.0),
      );
    } else if (state == 1) {
      return SizedBox(
        height: 36.0,
        width: 36.0,
        child: CircularProgressIndicator(
          value: null,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
        ),
      );
    } else if (state == 2) {
      return Icon(Icons.check, color: Colors.white);
    } else {
      Timer(Duration(milliseconds: 5300), () {
        var controller = AnimationController(
            duration: Duration(microseconds: 2000), vsync: this);
        _animation = Tween(begin: 1.0, end: 0.0).animate(controller)
          ..addListener(() {
            setState(() {});
          });

        controller.forward();
      });

      return Icon(Icons.close, color: Colors.white);
    }
  }
}

这是另一个类，我称之为进度按钮：

class HomePage extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<HomePage> {
  int x = 3;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Center(
        child: ProgressButton(
          text: 'Bassey',
          state: x,
          onPressed: () {
            setState(() {
              x = 2;

              ProgressButton.of(context).state = 2;
            });
          },
        ),
      ),
    );
  }
}

在HomePage类中，我尝试通过具有一个名为state的变量并将其传递到ProgressButton state属性中来更改按钮的状态，该方法起作用了，但是问题是改变它。每当单击ProgressButton时，我都会放置一个setstate函数，该函数会将状态变量号更改为另一个，但是这一次并不会改变按钮的外观。

如何从外部类更改按钮的状态？