Animating expanding / contracting on widgets of unknown size

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!

score 0 · Answer 1 · answered Jun 10 '20 at 06:55

0

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.

answered Jun 10 '20 at 06:55

SingleSoul

14
3

How do I animate between two sizes with SizeTransition? Even if I use Tween(begin: 200, end: double.infinity).animate(controller) The animation always starts at 0 – Hannes Hultergård Jun 10 '20 at 09:33
use ```controller.forward()``` and ```controller.reverse()``` to toggle between the two, or use this toggle function ```Future toggle() => _controller.isDismissed ? _controller.forward() : _controller.reverse();```. and apply it on the container onTap(). – SingleSoul Jun 10 '20 at 18:20

score 0 · Answer 2 · answered Jan 07 '22 at 15:19

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")],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Animating expanding / contracting on widgets of unknown size

2 Answers2