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

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

Route Transitions

此插件帮助实现页面之间的过渡效果。

示例用法

Routetransitions(
    context: context, // BuildContext
    child: Page2(), // 目标页面
    animation: AnimationType.fadeIn, // 动画类型
    // duration: Duration(milliseconds: 100), // 动画时长
    // replacement: true,
);

完整示例Demo

在下面的示例中，我们将展示如何在两个页面之间使用route_transitions_perfect插件来实现不同的过渡动画。

main.dart

import 'package:flutter/material.dart';

import 'page1.dart';
import 'page2.dart';

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

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

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

page1.dart

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              Routetransitions(
                context: context,
                child: const Page2(),
                animation: AnimationType.slideFromRight, // 使用从右滑入的动画
                // duration: Duration(milliseconds: 500), // 可选参数，设置动画时长
              ),
            );
          },
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

page2.dart

import 'package:flutter/material.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page 2'),
      ),
      body: const Center(
        child: Text('This is Page 2'),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用 route_transitions_perfect 插件在 Flutter 中实现页面路由过渡动画的示例代码。route_transitions_perfect 是一个强大的 Flutter 插件，它提供了多种页面过渡动画效果。

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

dependencies:
  flutter:
    sdk: flutter
  route_transitions_perfect: ^2.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来获取依赖。

接下来，我们将展示如何使用这个插件来实现页面路由过渡动画。

主应用文件 main.dart

import 'package:flutter/material.dart';
import 'package:route_transitions_perfect/route_transitions_perfect.dart';
import 'second_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Route Transitions Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorKey: GlobalKey<NavigatorState>(),
      onGenerateRoute: (RouteSettings settings) {
        WidgetBuilder builder;
        switch (settings.name) {
          case '/':
            builder = (BuildContext context) => MyHomePage();
            break;
          case '/second':
            builder = (BuildContext context) => SecondScreen();
            break;
          default:
            throw Exception('Invalid route: ${settings.name}');
        }

        final route = PageRouteBuilder<void>(
          pageBuilder: (BuildContext context, _, __) => builder(context),
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) {
            if (settings.name == '/') {
              return FadeThroughTransition(
                animation: animation,
                secondaryAnimation: secondaryAnimation,
                child: child,
              );
            } else if (settings.name == '/second') {
              return SlideInRightTransition(
                animation: animation,
                secondaryAnimation: secondaryAnimation,
                child: child,
              );
            } else {
              return child;
            }
          },
        );

        return route;
      },
      initialRoute: '/',
    );
  }
}

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

第二个屏幕文件 second_screen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}

解释

  1. 依赖引入：在 pubspec.yaml 中添加了 route_transitions_perfect 依赖。
  2. 主应用文件：
    • 使用 MaterialApp 并设置 navigatorKey 和 onGenerateRoute。
    • 在 onGenerateRoute 中，根据路由名称构建不同的页面。
    • 使用 PageRouteBuilder 和 transitionsBuilder 来自定义过渡动画。
    • FadeThroughTransition 和 SlideInRightTransition 是 route_transitions_perfect 提供的过渡动画。
  3. 页面定义：
    • MyHomePage 是主页，包含一个按钮，点击按钮会导航到 SecondScreen。
    • SecondScreen 是第二个页面，显示一些简单的文本。

这个示例展示了如何使用 route_transitions_perfect 来实现不同的页面过渡动画。你可以根据需要选择不同的过渡动画效果，例如 SlideInLeftTransition、ScaleTransition 等。更多动画效果可以参考 route_transitions_perfect 的官方文档。

回到顶部