I am developing Uber like app using flutter and I want to achieve the animation of widgets when a category of ride is selected like the image below.
My code:
Widget rideOption(RideOption ride, bool isSelected) {
return AnimatedContainer(
height: 150,
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
margin: EdgeInsets.symmetric(vertical: 8),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: isSelected ? Colors.white : Colors.grey[200],
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isSelected ? Colors.black : Colors.grey[300]!,
width: 2,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: isSelected ? 16 : 0),
if (!isSelected)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
AnimatedAlign(
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
alignment: isSelected ? Alignment.topCenter : Alignment.centerLeft,
child: Image.asset(
ride.imagePath,
height: 60,
width: 60,
),
),
Text(
ride.title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
Text(
ride.priceRange,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
],
)
else
Expanded(
child: Column(
children: [
AnimatedAlign(
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
alignment: isSelected ? Alignment.topCenter : Alignment.centerLeft,
child: Image.asset(
ride.imagePath,
height: 60,
width: 60,
),
),
Row(
children: [
SizedBox(width: 16),
Text(
ride.title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
Spacer(),
Text(
ride.priceRange,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
],
),
],
),
),
],
),
);
}
As you see i implemented this widget but the transition is immediately but i want it like Uber app smooth and sliding the car image from left bottom to top center
What I want: