Flutter路由过渡动画插件curso_routes_transition_jfgq的使用

Flutter路由过渡动画插件curso_routes_transition_jfgq的使用

在本示例中，我们将展示如何使用 curso_routes_transition_jfgq 插件来实现 Flutter 应用程序中的页面过渡动画。通过该插件，我们可以轻松地为页面之间的切换添加各种过渡效果。

示例代码

文件结构

• main.dart

main.dart

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

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

// 定义主应用类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      debugShowCheckedModeBanner: false,
      initialRoute: 'page1',
      routes: {
        'page1': (_) => Page1(),
        'page2': (_) => Page2(),
      },
    );
  }
}

// 定义第一页
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          child: const Text('Go to page2'),
          color: Colors.white,
          onPressed: () {
            // 使用RouteTransitions进行页面过渡
            RouteTransitions(
              duracion: const Duration(milliseconds: 2000), // 设置过渡时长
              child: Page2(), // 目标页面
              context: context,
              animation: AnimationType.normal, // 动画类型
              replacement: false, // 是否替换当前页面
            );
          },
        ),
      ),
    );
  }
}

// 定义第二页
class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.amber,
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

示例说明

1. 导入必要的包：

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

2. 定义主应用类 MyApp：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Material App',
         debugShowCheckedModeBanner: false,
         initialRoute: 'page1',
         routes: {
           'page1': (_) => Page1(),
           'page2': (_) => Page2(),
         },
       );
     }
   }
   

   • initialRoute 指定了启动时显示的初始页面。
   • routes 是一个映射表，用于定义不同页面之间的路由。

3. 定义第一页 Page1：

   class Page1 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('Page 1'),
           backgroundColor: Colors.transparent,
         ),
         backgroundColor: Colors.blue,
         body: Center(
           child: MaterialButton(
             child: const Text('Go to page2'),
             color: Colors.white,
             onPressed: () {
               RouteTransitions(
                 duracion: const Duration(milliseconds: 2000),
                 child: Page2(),
                 context: context,
                 animation: AnimationType.normal,
                 replacement: false,
               );
             },
           ),
         ),
       );
     }
   }
   

   • 当用户点击按钮时，会触发 RouteTransitions 进行页面过渡。
   • duracion 设置了过渡的持续时间。
   • child 是目标页面。
   • animation 设置了过渡动画的类型。
   • replacement 设置是否替换当前页面。

4. 定义第二页 Page2：

   class Page2 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('Page 2'),
           backgroundColor: Colors.transparent,
         ),
         backgroundColor: Colors.amber,
         body: const Center(
           child: Text('Page 2'),
         ),
       );
     }
   }