flutter学习--酷炫的路由动画

胖哥哥飘过

于 2019-05-21 19:02:47 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： android flutter 文章标签： android flutter

本文链接：https://blog.csdn.net/pgg_cold/article/details/90413065

本文介绍了在Flutter中创建酷炫路由动画的实践方法，包括主入口方法、pages.dart页面编写、自定义CustomRoute Widget、缩放、旋转+缩放以及左右滑动等多种动画效果的实现。通过自定义路由，实现了更丰富的页面过渡动画，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

酷炫的路由动画

主入口方法

import 'package:flutter/material.dart';
import 'pages.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()
    );
  }
}

pages.dart页面的编写

主入口文件用import引入了pages.dart文件，这个文件就是生成了两个页面（Flutter里的页面也是Widget,这个你要跟网页区分开）。有了两个页面就可以实现路由跳转了。

pages.dart文件的代码如下，这里我们先用普通路由代替，看一看效果。

import 'package:flutter/material.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: MaterialBu