在颤动中动态扩展一个组件并压缩另一个组件答案

【问题标题】：Dynamically expand a component and compress another component in flutter在颤动中动态扩展一个组件并压缩另一个组件
【发布时间】：2021-05-21 05:50:17
【问题描述】：

我有以下代码

          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%"

类似的东西

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

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

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

伪代码

var isClickedOnCart;

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


/// ONPRESSED CART CARD

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

【讨论】：

【解决方案2】：

你可以使用它。请记住，我只使用了 setState。

String text = 'Save 20%';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              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: Center(
                  child: Text(
                    text,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      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: () {
                      //here I use setState for sate management
                      //TODO: implement your logic to change the text
                      setState(() {
                        text = text == 'Save 20%' ? '20%' : 'Save 20%';
                      });
                    },
                    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(
                        Icons.shopping_cart,
                        color: Colors.black45,
                        size: 18.0,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ));
  }

【讨论】：