Как изменить состояние одного дочернего виджета от родительского виджета, где дочерний элемент представляет собой отдельный класс в отдельном файле?

Question

Как я могу изменить цвет коробки с синего на зеленый, нажав RaisedButton? Я использую Флаттер для Интернета.

class _MyAppState extends State<MyApp> {
  Color colorOfBox = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "App",
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.all(50),
          child: Center(
            child: Column(
              children: <Widget>[
                Text("This blue has to change to green."),    
                Box(colorOfBox),
                RaisedButton(
                  color: Colors.red,
                  onPressed: () {
                    setState(() {
                      colorOfBox = Colors.green;

                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Box extends StatefulWidget {
  Color c;
  Box(this.c, {Key key}) : super(key: key);

  @override
  _BoxState createState() => _BoxState(c);
}

class _BoxState extends State<Box> {
  Color c;
  _BoxState(this.c);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      color: c,
    );
  }
}

Answer 1

удалить Color c из _BoxState

class Box extends StatefulWidget {
  Color c;
  Box(this.c, {Key key}) : super(key: key);

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

class _BoxState extends State<Box> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 40,
      color: widget.c,
    );
  }
}