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

最新推荐文章于 2022-10-03 03:18:33 发布

胖哥哥飘过

最新推荐文章于 2022-10-03 03:18:33 发布

阅读量2.7k

点赞数 1

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

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

版权

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

摘要由CSDN通过智能技术生成

酷炫的路由动画

主入口方法

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