2021/2/7 FadeTransition – Flutter 今週の Widgetの訳

FadeTransition class

ウィジェットの不透明度(opacity)をアニメーション化します。

 

Flutter has a powerful animations engine
for adding motion and effects to your Flutter app.
Flutterには Flutterアプリに 動きと効果を与えるための強力なアニメーションエンジンがあります。
But sometimes, you just need to do something simple–
like fading in a widget.
でも シンプルなことだけが 必要なときもあります
例えばウィジェットの フェードインなどです。
And Flutter has you covered.
Flutter にお任せください。
Flutter has a bunch of transitions ready to drop into your Flutter app.
Flutter には すぐにFlutterアプリに 落とし込めるトランジションが沢山あります。
Let’s take a look at FadeTransition.
FadeTransitonを見てみましょう。
FadeTransition lets you fade a widget in and out.
FadeTransitonで ウィジェットの フェードイン/アウトができます。
FadeTransition(
    opacity: animation,
    child: Text(widget.text);

It takes a child and an animation.

FadeTransitionはchildと animation を引数に取ります。

But where does the animation come from?
このanimationは どこから来たのでしょう。
Well, first, we create an AnimationController
to set the duration,
まず AnimationControllerを作成し、durationを設定します。
final controller = AnimationController(
    vsync : this,
    duration : Duration(seconds: 2,),
);

and then we create an animation– giving the start and end opacity values
and animating via the controller.
次にanimationを作成します
透過度の開始値と終了値を与え、コントローラ経由でアニメートします。
final animation = Tween(
    begin: 0.0,
    end: 1.0,
).animate(controller);

Finally, we start the animation by calling forward on the controller.

最後にcontrollerのforwardメソッドを呼び出し、アニメーションを開始します。

controller.forward();

// lib/main.dart
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(MaterialApp(home: MyFadeIn(
      child:LogoWidget(),
    )));

class LogoWidget extends StatelessWidget {
  // Leave out the height and width so it fills the animating parent
  Widget build(BuildContext context) => Container(
        margin: EdgeInsets.symmetric(vertical: 10),
        child: FlutterLogo(
          size:400,
        ),
      );
}

class MyFadeIn extends StatefulWidget {
  final Widget child;

  const MyFadeIn({Key key, @required this.child}) : super(key: key);

  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;
  String currentState = '';

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration:Duration(seconds:2,),
    );
    _animation = Tween(
      begin:0.0,
      end:1.0,
    ).animate(_controller)
      ..addStatusListener((status) {
        if (status == AnimationStatus.forward) {
          setState((){
            currentState = '開始';
          });
        } else if (status == AnimationStatus.completed) {
          setState((){
            currentState = '終了';
          });
        }
      });;
  }

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

  @override
  Widget build(BuildContext context) {
    _controller.forward();
    return MaterialApp(
      home: Scaffold(
        appBar:AppBar(),
        body: Center(
          child: Column(
            children: [
              Text(currentState,
                style:TextStyle(
                  fontSize:50,
                ),
              ),
              FadeTransition(
                opacity: _animation,
                child: widget.child,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
参考

コメントを残す

メールアドレスが公開されることはありません。