flutter - 在颤动中动态扩展一个组件并压缩另一个组件

Question

我有以下代码

          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  child: Container(
                    height: 32.0,
                    padding: EdgeInsets.symmetric(
                        horizontal: 12.0, vertical: 5.0),
                    decoration: BoxDecoration(
                      color: Colors.green.shade300,
                      borderRadius: BorderRadius.circular(7.0),
                    ),
                    child: Row(
                      children: <Widget>[
                        Flexible(
                          child: Text(
                            'Save 20%',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.poppins(
                              fontSize: 12.0,
                              color: Colors.white,
                              fontWeight: FontWeight.w500,
                              letterSpacing: 0.5,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  width: 8.0,
                ),
                ClipRRect(
                  borderRadius: BorderRadius.circular(8.0),
                  child: Material(
                    child: InkWell(
                      splashColor: Colors.green.withOpacity(0.5),
                      onTap: () {
                        print('Add to cart');
                        if (FirebaseAuth.instance.currentUser == null) {
                          Navigator.pushNamed(context, '/sign_in');
                          return;
                        }
                        cartBloc.add(
                            AddToCartEvent(product.id, currentUser.uid));
                      },
                      child: Container(
                        width: 38.0,
                        height: 35.0,
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.01),
                          borderRadius: BorderRadius.circular(8.0),
                          border: Border.all(
                            width: 0.8,
                            color: Colors.black.withOpacity(0.15),
                          ),
                        ),
                        child: Icon(
                          FontAwesomeIcons.cartPlus,
                          color: Colors.black45,
                          size: 18.0,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

这导致以下视图

我想有以下条件

When I click the cart icon for the first time 

 1. add to cart button should expand if quantity > 0
 2. "You save 20%" component should compress to square box "20%"

像这样的东西

我非常感谢任何形式的反馈、评论、提示、解决方案指针。谢谢

标签： flutterflutter-layoutflutter-animation

Answer 1

我认为在您的情况下，您可以使用 AnimatedContainer 类。

伪代码

var isClickedOnCart;

AnimatedContainer(
....
width: isClickedOnCart? 100 : 20;
...
/// YOUR CODE HERE///
)


/// ONPRESSED CART CARD

onPressed(){
if(quantity > 0){
  setState(){
   isClickedOnCart = !isClickedOnCart;
}
}
}