Add a more elaborate example #1
Conversation
Has animation, restoration, didUpdateWidget, didChangeDependencies, etc.
|
I only added the StatefulWidget version, would love to see a Hooks version. I don't think the "late property" idea can really handle this yet, especially the performance-sensitive aspects. |
| super.initState(); | ||
| _colorListenable = ValueNotifier<Color>(Colors.green[100]); | ||
| int color = 100; | ||
| _timer = Timer.periodic(const Duration(milliseconds: 900), (Timer timer) { |
There was a problem hiding this comment.
Would it make sense to instead use an AnimationController.repeat + tween, so that we benefit from TickerMode and are closer to common use-cases?
There was a problem hiding this comment.
No, because this only ticks every 900ms, not every 16ms. But it would be good to take TickerMode into account.
| if (_firstTime) | ||
| _animation = AnimationController(vsync: this); | ||
| _animation.duration = _duration.value; | ||
| if (_firstTime && widget.active) | ||
| _animation.repeat(); | ||
| _firstTime = false; |
There was a problem hiding this comment.
What do these lines do?
There was a problem hiding this comment.
initialize the AnimationController and maintain its duration in the face of state restoration (e.g. hitting the back button on Web after clicking the button to change the duration).
| @override | ||
| void didChangeDependencies() { | ||
| super.didChangeDependencies(); | ||
| _height = _expensiveComputation(MediaQuery.of(context).size.height); |
There was a problem hiding this comment.
nit but I never understood the point of having didChangeDependencies
It's very brittle as adding any new dependency on a different InheritedWidget will cause the performance of this code to drop
So in the end we'd want to do:
final sizeHeight = MediaQuery.of(context).size.height;
if (previousSizeHeight != sizeHeight) {
previousSizeHeight = sizeHeight;
_height = _expensiveComputation(sizeHeight);
}But that's very tedious.
| } | ||
|
|
||
| class _StatefulAnimationState extends State<StatefulAnimation> { | ||
| ValueNotifier<Color> _colorListenable; |
There was a problem hiding this comment.
Why is this inside StatefulAnimation rather than Example?
There was a problem hiding this comment.
It's to show that the ValueListenable is coming via the widget rather than being local to the widget (in which case you wouldn't use a ValueListenable in the first place). Ideally it would be in the root widget in main.dart but I couldn't figure out how to make the hooks widget do it.
There was a problem hiding this comment.
I'll merge it in as is, I can place the ValueNotifier higher in the tree to make more clear the purpose later today.
There was a problem hiding this comment.
Might be fine to have them in the example as two different widgets just to show how it would be done in each mode. That keeps the weirdness out of the root.
There was a problem hiding this comment.
I'm still a bit weirded out by the presence of the ValueListenable<Color> color.
It feels like some unrelated architecture decisions are leaking in the example.
Has animation, restoration, didUpdateWidget, didChangeDependencies, etc.