Trigger a grow-then-shrink animation on notification from ChangeNotifier in Flutter - flutter

Question

I have a widget wrapped in a Consumer, that i want to smoothly grow and then return to its original size on notification from a ChangeNotifier.
I've managed to get the animation to grow, but not shrink again, so it just keeps getting bigger and bigger with each notifyListeners() call. I did that with an AnimatedContainer widget. I got the animation i wanted when i defined it in the initState method and manually calling animationController.forward().whenComplete(() => animationController.reverse()).
Any help to do that using Consumer as my trigger.
(edit)
This is the AnimatedContainer. The height and width aren't related to the value coming back from the state, but i'm using state.value ^ 0 just to trigger the resize. I know this will only grow in size, but thats why i'm asking how to shrink the sucker.
AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeIn,
height: _height * 1.1 * (state.value ^ 0),
width: _width * 1.1 * (state.value ^ 0),
child: SomeWidgetUsingTheState()...
),```

Answer 1

UPDATE
Since you want to have some kind of "StaggeredAnimaiton", meaning animate between multiple values (here back and forth) and you are using the implicit approach by using AnimatedContainer, the following code could be used (not recommended though):
My state / store
class ContainerState extends ChangeNotifier {
double height = 100.0;
double width = 150.0;
/// Needs the duration of the AnimatedContainer so we know
/// when we can start the reverse animation (by setting the values
/// back to normal)
startWiggle(Duration duration) {
this.height = 2 * height;
this.width = 2 * width;
notifyListeners();
Future.delayed(duration, () {
this.height = height / 2;
this.width = width / 2;
notifyListeners();
});
}
}
Widget tree for reference
class BaseView extends StatelessWidget {
#override
Widget build(BuildContext context) {
/// Since we are using ChangeNotifier as our base type for
/// indicating State objects, Provider has a designated Widget for that
return ChangeNotifierProvider(
create: (context) => ContainerState(),
builder: (context, _) => Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text('Title'),
pinned: true,
),
SliverList(
delegate: SliverChildListDelegate(
[
Padding(
padding: const EdgeInsets.only(top: 24.0),
child: Align(
child: GestureDetector(
onTap: () => context
.read<ContainerState>()
.startWiggle(Duration(milliseconds: 500)),
/// Gets rebuilded every time notifyListeners is called
/// inside ContainerState, therefore when we change the size
child: Consumer<ContainerState>(
builder: (context, containerState, child) =>
AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeIn,
height: containerState.height,
width: containerState.width,
color: Colors.red,
),
),
),
),
),
],
),
),
],
),
),
);
}
}
What you want to achieve here is not really suitable for this kind of animation (implicit animation). I would recommend to switch to direct animations using your own AnimationController instead so you have better control of how it should behave. My slides may help you here to get started: https://assets.kounex.com/flutter/uni_project_2020/en/04_flutter_animations.pdf

Answer 2

I don't understand what the caret sign is for. But I would do something like this :
animateContainer() async {
value = containerSize;
await Future.delayed(Duration(milliseconds: 500));
value = 0;
}