title: Flutter Animated Container
body: <p>I have a <code>RaisedButton</code> widget and an <code>AnimatedContainer</code> widget in a screen, and the idea is that upon pressing the <code>RaisedButton</code> the width of the <code>AnimatedContainer</code> would then decrease in a given duration. The documentation of the <code>AnimatedContainer</code> states that all I would need to do is declare the width of the widget as a variable, and then <code>setState(() {})</code> after changing the value and it will automatically change to that value during the duration. I have tried to implement this and upon pressing the <code>RaisedButton</code> the variables value definitely changes (based on printing the value of it after pressing it), however the widget's width does not change with it. Am I missing something obvious?</p>
  
  <p>My Widgets are within a container in a <code>PageView</code> and my code for the <code>RaisedButton</code> and <code>AnimatedContainer</code> is as follows:</p>
  
  <pre><code>RaisedButton (
    onPressed: () {
      setState(() {
        loginWidth = 70.0;
      });
    },
  ),
  AnimatedContainer (
   duration: new Duration (seconds: 2),
   width: loginWidth,
   height: 40,
   color: Colors.red,
  )
  </code></pre>
  
  <p>Here is my widget tree:</p>
  
  <pre><code>pages.add(
        Container(
          color: chSecondary,
          child: Stack(
            children: &lt;Widget&gt;[
              Container (
                child: Align (
                  child: Image(image: AssetImage("graphics/signin.png")),
                  alignment: Alignment.bottomCenter,
                ),
              ),
              Form(
                key: _formKey,
                child: new Container(
                  padding: EdgeInsetsDirectional.only(top: 100, start: 15, end: 15, bottom: 15),
                  child: new Column(
                    children: &lt;Widget&gt;[
                      Container (
                        child: Image(image: AssetImage("graphics/login.png"), height: 200, width: 200,),
                        margin: EdgeInsetsDirectional.only(bottom: 20),
                      ),
                      Container (
                        padding: EdgeInsets.all(25.0),
                        decoration: new BoxDecoration(
                          borderRadius: BorderRadius.circular(10.0),
                          color: Colors.white,
                        ),
                        child: Column (
                          children: &lt;Widget&gt;[
                            Align(
                              child: new Text("Email:", style: TextStyle(fontSize: tonSubTitle, color: Colors.black)),
                              alignment: Alignment.centerLeft,
                            ),
                            new Container(
                              child: new TextFormField(
                                keyboardType: TextInputType.emailAddress,
                                controller: _email,
                                style: TextStyle(fontSize: tonText, color: Colors.black),
                                decoration: InputDecoration(
                                  border: OutlineInputBorder(borderRadius: new BorderRadius.circular(tonRadius)),
                                  contentPadding: EdgeInsetsDirectional.only(top: 15, start: 7.5),
                                  focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Colors.grey)),
                                  hintText: "Email Address",
                                  hintStyle: TextStyle(color: Colors.black),
                                ),
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return "Please enter an email";
                                  }
                                  if (!value.contains("@tonbridge-school.org")) {
                                    return "Please enter a valid email address";
                                  }
                                },
  
                              ),
                              padding: const EdgeInsets.only(top: 10, bottom: 10)
                            ),
                            Align (
                              child: new Text("Password:", style: TextStyle(fontSize: tonSubTitle, color: Colors.black)),
                              alignment: Alignment.centerLeft,
                            ),
                            new Container(
                              child: new TextFormField(
                                obscureText: true,
                                controller: _password,
                                style: TextStyle(color: Colors.black, fontSize: tonText),
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsetsDirectional.only(top: 15, start: 7.5),
                                  border: OutlineInputBorder(borderRadius: new BorderRadius.circular(tonRadius)),
                                  focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Colors.grey)),
                                  hintText: "Password",
                                  hintStyle: TextStyle(color: Colors.black),
                                ),
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return "Please enter a password";
                                  }
                                },
                              ),
                              padding: const EdgeInsets.only(top: 10, bottom: 10)
                            ),
                            RaisedButton (
                              onPressed: () {
                                setState(() {
                                  loginWidth = 70.0;
                                });
                              },
                            ),
                            AnimatedContainer (
                              duration: new Duration (seconds: 2),
                              width: loginWidth,
                              height: 40,
                              color: Colors.red,
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ),
            ],
          ),
        ),
      );
  </code></pre>