Flutter FadeTransition で FadeIn させる！！

MaterialApp home: に MyFadeIn()を書き込む

引数の「displayChild」を定義していきましょー

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyFadeIn(
        displayChild: Center(child: Text("ゆっくり出てくる〜")),
      ),
    );
  }
}

MyFadeIn を StatefullWidgetで作る。

class MyFadeIn extends StatefulWidget {
  final displayChild;
  // 引数に「displayChild」を必須にする
  MyFadeIn({@required this.displayChild});
  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  // Widgetが呼ばれるたびに生成
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(controller);
    super.initState();
  }

  // initstateが終わったら破棄
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // controllerの処理を初めてる
    controller.forward();
    return FadeTransition(opacity: animation, child: widget.displayChild);
  }
}

コード全部

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyFadeIn(
        displayChild: Center(child: Text("aaaaaaaaa")),
      ),
    );
  }
}

class MyFadeIn extends StatefulWidget {
  final displayChild;
  // 引数に「displayChild」を必須にする
  MyFadeIn({@required this.displayChild});
  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  // Widgetが呼ばれるたびに生成
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(controller);
    super.initState();
  }

  // initstateが終わったら破棄
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // controllerの処理を初めてる
    controller.forward();
    return FadeTransition(opacity: animation, child: widget.displayChild);
  }
}

動画