Line data Source code
1 : import 'package:flutter/material.dart'; 2 : 3 : /// {@template fade_widget} 4 : /// Hides and shows child [Widget] with a beautiful [Curves.easeOut] animation 5 : /// {@endtemplate} 6 : class Fade extends StatefulWidget { 7 : /// {@macro fade_widget} 8 1 : const Fade({ 9 : super.key, 10 : required this.visible, 11 : required this.child, 12 : this.duration = const Duration(milliseconds: 200), 13 : this.curve = Curves.easeOut, 14 : }); 15 : 16 : /// The Widget that wants to be hidden 17 : final Widget child; 18 : 19 : /// The current visibility of the widget 20 : final bool visible; 21 : 22 : /// The duration of the transition 23 : final Duration duration; 24 : 25 : /// The curve of the animation 26 : final Curve curve; 27 : 28 1 : @override 29 1 : State<Fade> createState() => _FadeState(); 30 : } 31 : 32 : class _FadeState extends State<Fade> with SingleTickerProviderStateMixin { 33 : late AnimationController _animationController; 34 : 35 1 : @override 36 : void initState() { 37 2 : _animationController = AnimationController( 38 2 : value: widget.visible ? 1.0 : 0.0, 39 2 : duration: widget.duration, 40 : vsync: this, 41 : ); 42 : 43 1 : super.initState(); 44 : } 45 : 46 1 : @override 47 : void didUpdateWidget(Fade oldWidget) { 48 1 : super.didUpdateWidget(oldWidget); 49 : 50 1 : if (!oldWidget.visible && widget.visible) { 51 0 : _animationController.forward(); 52 3 : } else if (oldWidget.visible && !widget.visible) { 53 2 : _animationController.reverse(); 54 : } 55 : } 56 : 57 1 : @override 58 : Widget build(BuildContext context) { 59 1 : return FadeTransition( 60 1 : opacity: CurvedAnimation( 61 1 : parent: _animationController, 62 2 : curve: widget.curve, 63 : ), 64 1 : child: SizeTransition( 65 : axisAlignment: 1, 66 1 : sizeFactor: CurvedAnimation( 67 1 : parent: _animationController, 68 2 : curve: widget.curve, 69 : ), 70 2 : child: widget.child, 71 : ), 72 : ); 73 : } 74 : }