title: Flutter: Update state of sibling widget
body: <p>How do you update the state of a sibling widget in Flutter?</p>
  
  <p>For example, if I have a rectangle widget, I can change its color from within the widget by calling <code>setState()</code> and changing the color variable (as the "Turn Green" button does below). But, say I wanted a button outside of the rectangle that would change its color. How do I communicate to the Rectangle that it's time to change its color, and what color to change to?</p>
  
  <p>Here is my sample code. When the user presses the "Turn Blue" button, I'd like the rectangle to turn blue, but I don't have access to its state from the sibling widget.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() {
    runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Hello Rectangle',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Hello Rectangle'),
          ),
          body: Column(
            children: &lt;Widget&gt;[
              HelloRectangle(),
              FlatButton(
              child: Text('Turn Blue!',
                style: TextStyle(fontSize: 40.0),
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                // How to update state of the Rectangle from here?
              },
            ),
            ]
          ),
        ),
      ),
    );
  }
  
  class HelloRectangle extends StatefulWidget {
    @override
    HelloRectangleState createState() {
      return new HelloRectangleState();
    }
  }
  
  class HelloRectangleState extends State&lt;HelloRectangle&gt; {
    Color _color;
  
    @override
      void initState() {
        super.initState();
        _color = Colors.red;
      }
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: Container(
          color: _color,
          height: 400.0,
          width: 300.0,
          child: Center(
            child: FlatButton(
              child: Text('Turn Green!',
                style: TextStyle(fontSize: 40.0),
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                // I can update the state from here because I'm inside the widget
                setState(() {
                 _color = Colors.green;
                });
               },
            ),
          ),
        ),
      );
    }
  }
  </code></pre>