Animating expanding / contracting on widgets of unknown size - flutter

Question

We want of to display a list of images and text that we fetch from a database. When you tap on one of the images / texts, they should expand with an animation. With the current code, the expanding animation works as intended, but the opposite does not work. The image shrinks without an animation, and then the AnimatedSize animates. See: Flutter AnimatedSize works in one direction only
Since we don't have a solid color the solution to that question does not really work for us.
It does work with the images with the following code, but it's not ideal and text does not work at all that way.
Container(
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
snapshot.data.documents[index]['image'],
),
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
),
child: AnimatedSize(
duration: Duration(milliseconds: 300),
vsync: this,
child: Opacity(
opacity: 0,
child: Container(
height: _expandedIndex == index ? null : 250,
child: CachedNetworkImage(
imageUrl: snapshot.data.documents[index]['image'] ?? '',
fit: BoxFit.cover,
width: double.infinity,
),
),
),
),
),
I have found a lot of other people with the same problem, but I have never found a solution that works, so any help is very welcome.
Thanks!

Answer 1

use a sizeTransition Widget.
and set up your animationController and Tween<double>
and it should work fine, I've used it and it worked in both directions forward and reverse.

Answer 2

Tried sizeTransition widget, and it worked for me. AnimationController and Tween are not necessary. Here is my worked code.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>
with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
late final Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
);
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
child: const Text('toggle'),
onPressed: () => _controller.isDismissed
? _controller.forward()
: _controller.reverse(),
),
SizeTransition(
sizeFactor: _animation,
axis: Axis.vertical,
axisAlignment: -1,
child: Container(
color: Colors.amberAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const [Text("Hello"), Text("World")],
),
),
),
],
),
);
}
}