Flutter自定义路由过渡动画插件custom_route_transition_jg的使用

路由过渡

此插件帮助实现路由之间的过渡动画。

示例代码

示例：main.dart

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: 'page1',
      routes: {
        'page1': (context) => const Page1(),
        'page2': (context) => const Page2(),
      },
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @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 page 2'),
          onPressed: () {
            // 使用自定义的路由过渡动画
            Navigator.of(context).push(
              RouteTransitions(
                context: context, 
                child: const Page2(),
                animation: AnimationType.fadeIn,
                duration: const Duration(milliseconds: 300),
                replacement: true
              )
            );
          }
        )
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

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

说明

1. 导入库：

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

   导入必要的包以支持 Flutter 和 custom_route_transition_jg 插件。

2. 创建主应用类：

   class MainApp extends StatelessWidget {
     const MainApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         initialRoute: 'page1',
         routes: {
           'page1': (context) => const Page1(),
           'page2': (context) => const Page2(),
         },
       );
     }
   }
   

   创建一个基本的 Flutter 应用，并设置初始路由和页面。

3. 创建第一页：

   class Page1 extends StatelessWidget {
     const Page1({super.key});
   
     @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 page 2'),
             onPressed: () {
               // 使用自定义的路由过渡动画
               Navigator.of(context).push(
                 RouteTransitions(
                   context: context, 
                   child: const Page2(),
                   animation: AnimationType.fadeIn,
                   duration: const Duration(milliseconds: 300),
                   replacement: true
                 )
               );
             }
           )
         ),
       );
     }
   }
   

   在第一页中添加一个按钮，点击后触发自定义的路由过渡动画，从第一页跳转到第二页。

4. 创建第二页：

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