add the FadeTransition that can change the opacity of a widget.

Author: nb312

lib/const/page_item_const.dart

@@ -202,4 +202,9 @@ const PAGE_ITEMS = [
     "img": PageImage.FLUTTER_OPEN,
     "click": PageName.ANIM_HERO,
   },
+  {
+    "title": PageName.ANIM_FADE_TRANS,
+    "img": PageImage.FLUTTER_OPEN,
+    "click": PageName.ANIM_FADE_TRANS,
+  },
 ];

lib/const/page_name_const.dart

@@ -45,4 +45,5 @@ class PageName {
   static const ANIM_CONTAINER = "AnimationContainer";
   static const ANIM_CROSS_FADE = "AnimationCrossFade";
   static const ANIM_HERO = "HeroPage";
+  static const ANIM_FADE_TRANS = "FadeTranstion";
 }

lib/main.dart

@@ -59,6 +59,7 @@ class FlutterOpenApp extends StatelessWidget {
         PageName.ANIM_CONTAINER: (context) => AnimatedContainerPage(),
         PageName.ANIM_CROSS_FADE: (context) => AnimCrossFadePage(),
         PageName.ANIM_HERO: (context) => HeroPage(),
+        PageName.ANIM_FADE_TRANS: (context) => FadeTransitionPage(),
       },
     );
   }

lib/page/anim/FadeTransitionPage.dart

@@ -0,0 +1,56 @@
+///
+/// Created by NieBin on 2019/6/8
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+import "package:flutter/material.dart";
+import 'package:flutter_widgets/const/_const.dart';
+
+class FadeTransitionPage extends StatefulWidget {
+  @override
+  _FadeTransitionState createState() => _FadeTransitionState();
+}
+
+class _FadeTransitionState extends State<FadeTransitionPage>
+    with SingleTickerProviderStateMixin {
+  Animation<double> _animation;
+  AnimationController _controller;
+
+  Widget _fadeTrans() => FadeTransition(
+        opacity: _animation,
+        child: Text(
+          "Hello world",
+          style: TextStyle(color: RED_LIGHT),
+        ),
+      );
+
+  @override
+  void initState() {
+    _controller =
+        AnimationController(duration: Duration(seconds: 3), vsync: this);
+    CurvedAnimation curvedAnimation =
+        CurvedAnimation(parent: _controller, curve: Curves.easeOut);
+    _animation = Tween(begin: 0.0, end: 1.0).animate(curvedAnimation);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(PageName.ANIM_FADE_TRANS),
+      ),
+      body: Column(
+        children: <Widget>[
+          _fadeTrans(),
+          FloatingActionButton(
+            child: Text("Click Me"),
+            onPressed: () {
+              _controller.reset();
+              _controller.forward();
+            },
+          )
+        ],
+      ),
+    );
+  }
+}

lib/page/anim/_anim.dart

@@ -6,3 +6,4 @@ export "AnimationPage.dart";
 export 'AnimatedContainerPage.dart';
 export 'AnimCrossFadePage.dart';
 export 'HeroPage.dart';
+export 'FadeTransitionPage.dart';