🐡

[Flutter] FadeTransition (シンプルなアニメーション)

2022/10/20に公開

https://youtu.be/rLwWVbv3xDQ

FadeTransition

ウィジェットを簡単にフェードイン・アウトすることができる。

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );

  
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
      ),
    );
  }
}

↑flutterロゴが2秒間ずつ消えたり見えたりする

FadeTransition(
 opacity: animation,
 child: Text(widget.text));

FadeTransitionはは2つを引数としてもらう。

Discussion