Flutter 基础学习之 路由切换效果

main函数

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch:Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

FirstPage

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

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(title: Text('First Page',
      style: TextStyle(fontSize: 36.0)),
      elevation: 0.0,),
      body: Center(
        child: MaterialButton(
         child: Icon(
            Icons.navigate_next,
            color: Colors.white,
            size: 64.0,
         ),
         onPressed: (){
           Navigator.of(context).push(CustomeRoute(SecondPage()));
         },
        ),
      ),
    );
  }
}

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

动画组件

import 'package:flutter/material.dart';

class CustomeRoute extends PageRouteBuilder{

  final Widget widget;
  
  CustomeRoute(this.widget):super(
    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 FadeTransition(
      //   opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(
      //     parent: animation1,
      //     curve: Curves.fastOutSlowIn
      //   )),
      //   child: child,
      // );
      //旋转加缩放动画效果
      // return ScaleTransition(scale: Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
      //      parent: animation1,
      //      curve: Curves.fastOutSlowIn,)),
      //      child: 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.easeInOutCirc
        )),
        child: child,
        );
    }    
  );

}

参考文献：

https://www.bilibili.com/video/BV1kt411B7mu?p=6