码迷,mamicode.com
首页 > 其他好文 > 详细

flutter 路由动画

时间:2019-08-24 22:53:27      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:ges   sed   div   first   sse   bar   theme   tom   旋转   

import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/pages/FirstPage.dart‘;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Flutter Demo‘,
      theme: ThemeData(
        primarySwatch: Colors.green,  //定义主题风格    primarySwatch
      ),
      home: FirstPage(),
    );
  }

}
import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/CustomRoute.dart‘;
import ‘package:flutter_app/pages/SecondPage.dart‘;


class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue,
        appBar:AppBar(
          title:Text(‘FirstPage‘,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(
                  CustomRoute(SecondPage())); //使用自定义路由动画

            },
          ),
        )
    );
  }
}
import ‘package:flutter/material.dart‘;
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.pinkAccent,
        appBar: AppBar(
          title: Text(‘SecondPage‘,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 CustomRoute extends PageRouteBuilder {
  final Widget widget;

  CustomRoute(this.widget)
      : super(
            transitionDuration: const 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 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.fastOutSlowIn)),
//                child: child,
//              );

        return FadeTransition(
          opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
              parent:animation1,
              curve:Curves.fastOutSlowIn
          )),
          child: child,
        );
            });
}

效果:

技术图片

flutter 路由动画

标签:ges   sed   div   first   sse   bar   theme   tom   旋转   

原文地址:https://www.cnblogs.com/loaderman/p/11350141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!