improved upload photo animation

This commit is contained in:
Myzel394 2022-08-20 22:20:32 +02:00
parent 5a8a0352c1
commit 2b5832cf1a

View File

@ -15,27 +15,37 @@ class UploadingPhoto extends StatefulWidget {
State<UploadingPhoto> createState() => _UploadingPhotoState(); State<UploadingPhoto> createState() => _UploadingPhotoState();
} }
const DURATION = Duration(milliseconds: 800);
const CURVE = Curves.easeInBack;
class _UploadingPhotoState extends State<UploadingPhoto> class _UploadingPhotoState extends State<UploadingPhoto>
with TickerProviderStateMixin { with TickerProviderStateMixin {
late final AnimationController controller; late final AnimationController controller;
late final Animation<double> animation; late final Animation<double> animation;
bool animateOut = false;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
controller = AnimationController( controller = AnimationController(
duration: const Duration(milliseconds: 200), duration: DURATION,
vsync: this, vsync: this,
); );
animation = Tween(begin: 1.0, end: 0.8).animate( animation = Tween(begin: 1.0, end: 0.8).animate(
CurvedAnimation( CurvedAnimation(
parent: controller, parent: controller,
curve: Curves.easeOutQuad, curve: CURVE,
), ),
); );
controller.forward(); controller.forward();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
animateOut = true;
});
});
} }
@override @override
@ -59,7 +69,20 @@ class _UploadingPhotoState extends State<UploadingPhoto>
), ),
borderRadius: BorderRadius.circular(MEDIUM_SPACE), borderRadius: BorderRadius.circular(MEDIUM_SPACE),
), ),
child: Image.memory(widget.data, fit: BoxFit.cover), child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.memory(widget.data, fit: BoxFit.cover),
AnimatedOpacity(
opacity: animateOut ? 0 : 1,
duration: DURATION,
curve: CURVE,
child: Container(
color: Colors.white,
),
),
],
),
), ),
); );
} }