Dynamically expand a component and compress another component in flutter - flutter

Question

I have the following code
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,
),
),
),
),
),
],
),
),
which results in the following view
I want to have the following criteria
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%"
Something like this
I would highly appreciate any kind of feedback, comments, hints, solution pointers. Thx

Answer 1

I think in your case you can use an AnimatedContainer class.
pseudocode
var isClickedOnCart;
AnimatedContainer(
....
width: isClickedOnCart? 100 : 20;
...
/// YOUR CODE HERE///
)
/// ONPRESSED CART CARD
onPressed(){
if(quantity > 0){
setState(){
isClickedOnCart = !isClickedOnCart;
}
}
}

Answer 2

You can use this. Remember that, I have used only 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,
),
),
),
),
),
],
),
));
}