Flutter基础总结(8) 自定义路由跳转

征服畏惧，建立自信的最快最确实的方法，就是去做你害怕的事情，知道你获得成功的经验。

1：效果图

image.png image.png image.png

2:代码

1：main.mart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'FirstPage.dart';

void main(){
  runApp(MyApp());
}
class MyApp  extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
  title: "动画的Demo",
  theme: ThemeData(
    primaryColor:  Colors.blue
  ),
  home: FirstPage(),
);
}


}

2FirstPage.dart

  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';

  import 'custom_router.dart';

//第一个页面
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  appBar: AppBar(
    title: Text(
      "FirstPage",
      style: TextStyle(fontSize: 30.0),
    ),
    elevation: 0.0,
  ),
  body: Center(
    child: MaterialButton(
      child: Icon(
        Icons.navigate_next,
        color: Colors.red,
        size: 64,
      ),
      onPressed: () {
        Navigator.of(context).push(CustomRoute(SecondPage()));
      },
    ),
  ),
);
}


class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  backgroundColor: Colors.pinkAccent,
  appBar: AppBar(
    title: Text(
      "SeconPage",
      style: TextStyle(fontSize: 30.0),
    ),
    backgroundColor: Colors.pinkAccent,
    leading: Container(),
    elevation: 0.0,
  ),
  body: Center(
    child: MaterialButton(
      child: Icon(
        Icons.navigate_before,
        color: Colors.white,
        size: 50,
      ),
      onPressed: (){
        Navigator.of(context).pop();
      },
    ),

  ),
);
}
}

3:CustomRoute.dart

import 'package:flutter/cupertino.dart';

//自定义路由实现翻转，渐变 ，左右滑动
class CustomRoute extends PageRouteBuilder {
final Widget widget;

CustomRoute(this.widget)
  : super(
//设置动画时长1秒
  transitionDuration: Duration(seconds: 1),
  //构架页面
  pageBuilder: (BuildContext context,
      Animation<double> animation1,
      Animation<double> animation2,) {
    return widget;
  },
  /* 过渡生成器*/
  transitionsBuilder: (BuildContext context,
      Animation<double> animation1,
      Animation<double> animation2,
      Widget child) {
    //翻转
    /*    return RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                  parent: animation1, curve: Curves.fastOutSlowIn)),
              //缩放
              child: ScaleTransition(
                scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                    parent: animation1,
                     //动画曲线
                    curve: Curves.fastOutSlowIn)),
                child: child,
              ));*/
    //左右滑动
    return SlideTransition(
        position: Tween<Offset>(
            begin: Offset(-1.0, 0.0),
            end: Offset(0.0, 0.0)

        ).animate(CurvedAnimation(parent:animation1,curve:Curves.fastOutSlowIn)),
         child:  child,
    );
   /* return FadeTransition(
      //不透明
      opacity: Tween(
        begin: 0.0,end: 1.0

      ).animate(CurvedAnimation(
        parent: animation1,
        curve: Curves.fastOutSlowIn
      )),
     child:  child,
    );*/
  });
 }

githup:https://github.com/xuezhihuixzh/Flutter_demo