How To Set AnimatedContainer To Full Width?

user_1850887 0
Viewed 547

I am trying to learn to make animation. I have a code to alternate between Button and CircularProgress when button is pressed:

       AnimatedContainer(
          duration: Duration(milliseconds: 300),
          curve: Curves.linear,
          width: _isLoading ? 60 : 350,
          height: 40.0,
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: AnimatedOpacity(
                    duration: Duration(milliseconds: 290),
                    curve: Curves.easeIn,
                    opacity: _isLoading ? 0.0 : 1.0,
                    child: SizedBox(
                      width: double.infinity,
                      child: MyOutlineButton(
                        label: constant.signIn,
                        onPressed: (){
                          _isLoading = true;
                          setState(() {});
                          Future.delayed(const Duration(milliseconds: 1000), () {
                            _isLoading = false;

                            setState(() {});
                          });
                        },
                      ),
                    )),
              ),
              Align(
                alignment: Alignment.center,
                child: AnimatedOpacity(
                  duration: Duration(milliseconds: 290),
                  curve: Curves.easeOut,
                  opacity: _isLoading ? 1.0 : 0.0,
                  child: Center(
                    child: CircularProgressIndicator(
                      backgroundColor: constant.colorWhite,
                    ),
                  ),
                ),
              ),
            ],
          ),
        )

I want to find a better solution to set my AnimatedContainer width when Button is displayed. I want to set it to full width without guessing or maxing the number by putting random number(in the code i set it to 350). Is there a better way to do this? Thank you.

dart flutter
2 Answers

You can use MediaQuery.of(context).size.width to get the width of the device.

user_136730610

you can use Expanded widget or flexible while using a row or column or ConstrainBox that give you an ability to constrain widget or layout builder and a bunch of other widgets with fittedBox you can control the fit.here is the link and also if you wanna create responsive UI here is the link for some useful widgets responsive ui

user_86213500
Related