How to give animation to container when no height and width is defined-CodePudding

I want to give animation to my container, I want to increase the size from a low width and height of the container up to the default size that it is taking now.

    Container(
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              colorFilter:ColorFilter.mode(Colors.pink, BlendMode.color),
                              image: AssetImage(
                                'lib/images/Alone.jpg',
                              ),
                            ),
                            borderRadius: BorderRadius.circular(10),
                            gradient: LinearGradient(
                                colors: <Color>[
                                  Colors.yellowAccent,
                                  Colors.blueAccent,
                                ]
                            )
                        ),
                        child: FlatButton(
                          onPressed: (){
                            Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context)=>Alone())
                            );
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(24.0),
                            child: Text(
                              'Alone',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                      ),

CodePudding user response：

Use an AnimatedContainer. There's a lot of stuff you can achieve doing this. Animated Container

CodePudding user response：

 AnimatedContainer(
                  height: isIncreaseSize ? 300 : 200,
                  width: isIncreaseSize ? 300 : 200,
                  duration: Duration(milliseconds: 200),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              colorFilter:ColorFilter.mode(Colors.pink, BlendMode.color),
                              image: AssetImage(
                                'lib/images/Alone.jpg',
                              ),
                            ),
                            borderRadius: BorderRadius.circular(10),
                            gradient: LinearGradient(
                                colors: <Color>[
                                  Colors.yellowAccent,
                                  Colors.blueAccent,
                                ]
                            )
                        ),
                        child: FlatButton(
                          onPressed: (){
                            Navigator.push(
                                context,
                                MaterialPageRoute(builder: (context)=>Alone())
                            );
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(24.0),
                            child: Text(
                              'Alone',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                      )

u need a boolean to change size like as isIncreaseSize. duration: Duration(milliseconds: 200) animation duration. that all