Flutter页面路由过渡动画插件route_transitions_pro的使用

Flutter 页面路由过渡动画插件 route_transitions_pro 的使用

这个包帮助实现路由之间的过渡动画。

使用示例

import 'package:route_transition_yr/route_transition_yr.dart';

RouteTransitions(
    context: context,  // BuildContext
    child: Page2Screen(), // Page Widget
    animation: AnimationType.fadeInUp, // Animation Type
    duration: const Duration(milliseconds: 900), // Duration
    alignment: Alignment.topLeft,
    replacement: true, 
);

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: 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(
          color: Colors.white,
          child: const Text('Go to Page 2'),
          onPressed: () {
            Navigator.of(context).push(
              RouteTransitions(
                context: context,
                child: const Page2(),
                animation: AnimationType.fadeInUp,
                duration: const Duration(milliseconds: 900),
                replacement: true,
              ),
            );
          },
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: 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('Page 2'),
      ),
    );
  }
}

说明

  1. 导入包:

    import 'package:route_transition_yr/route_transition_yr.dart';

  2. 定义主应用:

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

  3. 配置 MaterialApp:

    class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialRoute: 'page1', // 设置初始路由
      routes: {
        'page1': (context) => const Page1(),
        'page2': (context) => const Page2(),
      },
    );
  }
}

  4. 定义第一个页面:

    class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: 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(
          color: Colors.white,
          child: const Text('Go to Page 2'),
          onPressed: () {
            Navigator.of(context).push(
              RouteTransitions(
                context: context,
                child: const Page2(),
                animation: AnimationType.fadeInUp,
                duration: const Duration(milliseconds: 900),
                replacement: true,
              ),
            );
          },
        ),
      ),
    );
  }
}

  5. 定义第二个页面:

    class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: 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('Page 2'),
      ),
    );
  }
}

更多关于Flutter页面路由过渡动画插件route_transitions_pro的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面路由过渡动画插件route_transitions_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用route_transitions_pro插件来实现页面路由过渡动画的一个简单示例。这个插件允许你自定义页面之间的过渡动画，使得你的应用导航体验更加丰富和流畅。

首先，确保你已经在你的pubspec.yaml文件中添加了route_transitions_pro依赖：

dependencies:
  flutter:
    sdk: flutter
  route_transitions_pro: ^1.0.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们将设置一个基本的Flutter应用，并应用route_transitions_pro来实现页面之间的过渡动画。

1. 创建基本的Flutter应用

假设你已经有了一个基本的Flutter应用结构，如果没有，你可以通过flutter create my_app来创建一个新的Flutter项目。

2. 配置路由和过渡动画

在你的main.dart文件中，你需要配置路由和过渡动画。以下是一个完整的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Route Transitions Pro Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorKey: RouteTransitionsPro.navigatorKey, // 关键步骤：设置navigatorKey
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/detail': (context) => DetailScreen(),
      },
      onGenerateRoute: RouteTransitionsPro.generateRoute, // 关键步骤：设置onGenerateRoute
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, '/detail', arguments: {'title': 'Detail Page'}),
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String title;

  DetailScreen({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('This is the detail screen!'),
      ),
    );
  }
}

// 自定义过渡动画
class CustomTransition extends RouteTransitionsBuilder {
  @override
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: Offset(1.0, 0.0),
        end: Offset.zero,
      ).animate(animation),
      child: child,
    );
  }
}

// 应用自定义过渡动画
void configureRoutes() {
  RouteTransitionsPro.configure({
    '/': {
      transitionsBuilder: () => CustomTransition(),
    },
    '/detail': {
      transitionsBuilder: () => CustomTransition(),
      popTransitionsBuilder: () => ReverseTransition(transitionBuilder: () => CustomTransition()),
    },
  });
}

// 在MyApp的build方法中添加配置路由的代码
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    configureRoutes(); // 配置路由
    return MaterialApp(
      title: 'Flutter Route Transitions Pro Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorKey: RouteTransitionsPro.navigatorKey,
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/detail': (context) => DetailScreen(),
      },
      onGenerateRoute: RouteTransitionsPro.generateRoute,
    );
  }
}

解释

  1. RouteTransitionsPro.navigatorKey 和 RouteTransitionsPro.generateRoute：这两个是关键，它们允许route_transitions_pro接管路由管理，从而可以应用自定义的过渡动画。

  2. CustomTransition：这是一个自定义的过渡动画类，它扩展了RouteTransitionsBuilder。在这个例子中，我们使用了SlideTransition来实现一个从右向左的滑动过渡效果。

  3. configureRoutes：这个方法用于配置每个路由的过渡动画。我们为每个路由指定了transitionsBuilder，并为返回（pop）操作指定了popTransitionsBuilder（使用ReverseTransition来反转过渡动画）。

  4. 在MyApp的build方法中调用configureRoutes：确保在MaterialApp被构建之前调用configureRoutes方法，以正确配置路由和过渡动画。

通过上述步骤，你就可以在Flutter应用中使用route_transitions_pro来实现页面之间的自定义过渡动画了。你可以根据需要调整动画效果，以适应你的应用设计。

回到顶部