flutter 淡入淡出 仅做记录

转载一个看到的浅尝flutter中的动画（淡入淡出） https://www.jianshu.com/p/f5ee8382bb73 

main.dart

import 'package:flutter/material.dart';
void main() => runApp( MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Navigation',
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) =>  FadeDemo(),
      },
    );
  }
}

class FadeDemo extends StatefulWidget {
  @override
  createState() => new LogoFadeState();
}
class LogoFadeState extends State<FadeDemo> {
  // 初始opacityLevel为1.0为可见状态，为0.0时不可见
  double opacityLevel = 1.0;
  _changeOpacity() {
    //调用setState（）  根据opacityLevel当前的值重绘ui
    // 当用户点击按钮时opacityLevel的值会（1.0=>0.0=>1.0=>0.0 ...）切换
    // 所以AnimatedOpacity 会根据opacity传入的值(opacityLevel)进行重绘 Widget
    setState(
            () => opacityLevel = opacityLevel == 0 ? 1.0 : 0.0
    );
  }
  @override
  Widget build(BuildContext context) {
    return new Column(//一个Column布局，主轴为垂直方向，起点在上沿。
      mainAxisAlignment: MainAxisAlignment.spaceAround,//子组件在主轴上均匀分布在容器内，两边留有一半的间隔空间。
      children: [
        new AnimatedOpacity(// 使用一个AnimatedOpacity Widget
            opacity: opacityLevel,
            duration: new Duration(seconds: 1),//过渡时间：1
            child:new Container(
              padding:const EdgeInsets.only(right:20.0,bottom:15.0,left:20.0),//内边距
              child:new Text("和React Native一样，Flutter也提供响应式的视图，Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题，即用名为Dart的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码，这允许Flutter直接与平台通信，而不需要通过执行上下文切换的JavaScript桥接器。编译为原生代码也可以加快应用程序的启动时间。实际上，Flutter是唯一提供响应式视图而不需要JavaScript桥接器的移动SDK，这就足以让Fluttter变得有趣而值得一试，但Flutter还有一些革命性的东西，即它是如何实现UI组件的？",
              style: new TextStyle(
                fontSize: 12.0,
                decoration: TextDecoration.none,
              ),) ,)
        ),
        new RaisedButton(
          child:new Container(
            child: new Text("点我试试"),
          ) ,
          onPressed: _changeOpacity,//添加点击事件
        ),
      ],
    );
  }
}

 flutter 淡出

转自  https://flutterchina.club/flutter-for-android/#%E5%9C%A8android%E4%B8%AD%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87viewanimate%E5%AF%B9%E8%A7%86%E5%9B%BE%E8%BF%9B%E8%A1%8C%E5%8A%A8%E7%94%BB%E5%A4%84%E7%90%86%E9%82%A3%E5%9C%A8flutter%E4%B8%AD%E6%80%8E%E6%A0%B7%E6%89%8D%E8%83%BD%E5%AF%B9widget%E8%BF%9B%E8%A1%8C%E5%A4%84%E7%90%86

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:english_words/english_words.dart';
import 'home.dart';
void main() => runApp( MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: 'Navigation',
      initialRoute: '/fadeApp',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) =>  Home(),
        '/fadeApp': (BuildContext context) =>  FadeAppTexst(),
      },
    );
  }
}

class FadeAppTexst extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    title: "fade demo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    home: new MyFadeTest(title: "fade demo"),
    );
  }
}
class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super (key: key);
  final String title;
  @override
  _MyFadeTest createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin{
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    controller = new AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
    curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build (BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Center(
        child: Container(
          child: FadeTransition(
            opacity: curve,
            child: new Text(
              "乌拉乌拉"
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: "fade",
        child: new Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}