gskinner / gskinner/flutter_animate

How to use different animations delay on appear than on going away

Open
#136 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Dart
Stars
1.1k
Forks
103
PR merge metrics
No merged PRs in 30d

Description

This is what I would like to achieve:

1. When the widget appears I want the animation to be delayed by 500 ms and fade in for 300 ms
2. When the widget disappears I want the animation to start immediately and fade out for 300 ms

Currently when using `AnimatedOpacity` I achieve it by simply calling setState after a dedicated `Timer(Duration(milliseconds: 500))`, but I would love to define this declaratively.

Is there a way to achieve it?

I achieved this effect using AnimatedOpacity as follows:

```dart
import 'dart:async';

import 'package:flutter/widgets.dart';

/// Widget that delays opacity change when widget
/// appears (in) or disappears (out)
class DelayedAnimatedOpacity extends StatefulWidget {
const DelayedAnimatedOpacity({
super.key,
Duration? delayIn,
Duration? delayOut,
this.duration = const Duration(milliseconds: 500),
required this.child,
required this.visible,
}) : delayIn = delayIn ?? const Duration(milliseconds: 500),
delayOut = delayOut ?? Duration.zero;

final Duration delayIn;
final Duration delayOut;
final Duration duration;
final Widget child;
final bool visible;

@override
State createState() => _DelayedAnimatedOpacityState();
}

class _DelayedAnimatedOpacityState extends State {
bool visible = false;
Timer? _timer;

@override
void initState() {
super.initState();
if (widget.visible) {
_timer = Timer(widget.delayIn, () {
if (mounted) {
setState(() {
visible = true;
});
}
});
}
}

@override
void didUpdateWidget(covariant DelayedAnimatedOpacity oldWidget) {
super.didUpdateWidget(oldWidget);

if (widget.visible != visible) {
if (widget.visible) {
_timer?.cancel();
_timer = Timer(widget.delayIn, () {
if (mounted) {
setState(() {
visible = true;
});
}
});
} else {
_timer?.cancel();
_timer = Timer(widget.delayOut, () {
if (mounted) {
setState(() {
visible = false;
});
}
});
}
}
}

@override
void dispose() {
_timer?.cancel();
super.dispose();
}

@override
Widget build(BuildContext context) {
return AnimatedOpacity(
duration: widget.duration,
opacity: visible ? 1 : 0,
child: widget.child,
);
}
}

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.