flutter 设置启动页动画

1、在main.dart的MaterialApp内,将home对应的组件内容设置成,启动页所在组件

2、启动页设置有状态组件，第二个状态类还要with多继承SingleTickerProviderStateMixin

3、在initState生命周期函数中定义动画控制器和监听动画结束跳转到指定页面

	AnimationController  xx=AnimationController(vsync: this,duration: Duration(milliseconds:动画毫秒数 ));
		
	 _animation.addStatusListener((status){
	    if(status==AnimationStatus.completed)   动画结束状态
		    {
		    跳转时销毁页面,避免动画占据内存
		      Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>组件名()),(route) => route == null);
		    }
	  });

4、在dispose生命周期函数中销毁控制器,避免内存泄露
	xx.dispose();

5、设置动画
	直接在build中
	其他种类动画和混合动画,查看普通路由的切换动画文章
	return FadeTransition(
      opacity:  Tween(begin: 0.0,end:1.0).animate(xx控制器)，
      child: 启动页内容,
    );

代码示例:
main.dart

import 'package:flutter/gestures.dart';
import "package:flutter/material.dart";
import 'package:flutter/rendering.dart';
import "drag.dart";
import 'dart:ui';

import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
import 'xuan.dart';

void main()
{
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return App2();
  }
}

class App2 extends StatefulWidget {
  App2({Key key}) : super(key: key);

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

class _AppState extends State<App2> with SingleTickerProviderStateMixin {

  // List _page=[Home3(),Home2(),Home4()];
  // int index=0;
  TabController con;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    con=new TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    con.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home:Home3() ,
      
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}

启动页:

import 'package:flutter/material.dart';
import "3.dart";

class Home3 extends StatefulWidget {
  Home3({Key key}) : super(key: key);

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

class _Home3State extends State<Home3> with SingleTickerProviderStateMixin{

AnimationController _con;
Animation _animation;


@override
void initState() { 
  super.initState();
  _con=AnimationController(vsync: this,duration: Duration(milliseconds:3000 ));
  _animation= Tween(begin: 0.0,end:1.0).animate(_con);

  _animation.addStatusListener((status){
    if(status==AnimationStatus.completed)
    {
      Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>Home4()),(route) => route == null);
    }
  });

  _con.forward(); //播放动画
}

@override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _con.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Image.asset("images/2.0x/钢铁侠4.jpg",scale: 2.0,fit: BoxFit.cover,),
    );
  }


}

跳转页:

import 'dart:async';
import 'dart:convert' as convert;
import 'package:http/http.dart' as http;
import 'package:dio/dio.dart';

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:myflutter/page/me.dart';


class Home4 extends StatefulWidget {
  Home4({Key key}) : super(key: key);

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

class _Home2State extends State<Home4> {
  String news='哈哈';
  @override
  void initState() { 
    super.initState();


  }
  var url="http://api.tianapi.com/txapi/ncov/index?key=4a8edfc8ac5eae9b0c5bf08157abba96";
  get() async{
     Response response = await Dio().get(url);
      print(response);
  }
  
  var url2="http://api.tianapi.com/txapi/ncov/index";
  post() async
  {
   Response response = await Dio().post(url2, data:{'key':'4a8edfc8ac5eae9b0c5bf08157abba96'});
    print(response);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body:Container(
      width: double.infinity,
      color: Colors.blue,
       child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
         children: <Widget>[
           
          RaisedButton(
            child: Text(news),
            color: Theme.of(context).accentColor,
            onPressed: (){
              get();
            },
          ),
          RaisedButton(
            child: Text('post'),
            color: Theme.of(context).accentColor,
            onPressed: (){
              post();
            },
          ),

       ]),
    )
    );
  }
}


  


// 因为表单组件需要改变状态,所以要使用有状态组件

/*

轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio

json.encode(Map); 将Map类型转换成json字符串
json.decode(json); 将json字符串类型转换成Map
 */