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

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

该插件允许以快速、简单且可配置的方式在屏幕之间进行过渡。

RouteTransition(
    context: context, // BuildContext
    child: PageDos(), // Widget screen
    animation: AnimationType.fadeIn, // AnimationType
    duration: Duration(seconds: 150), // Time
    replacement: true // pushReplacement or push
);

示例代码

example/main.dart

import 'package:flutter/material.dart';

import 'package:route_transition_dev/route_transition_dev.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Route Transition',
      debugShowCheckedModeBanner: false,
      initialRoute: 'page1',
      routes: {
        'page1': (context) => const FirstPage(),
        'page2': (context) => const SecondPage(),
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
        elevation: 0,
        centerTitle: true,
        backgroundColor: Colors.black87,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          color: Colors.black,
          onPressed: () {
            // 使用RouteTransition进行页面跳转，并设置过渡动画类型为fadeIn，持续时间为150毫秒
            RouteTransition(
              context: context,
              child: const SecondPage(),
              animation: AnimationType.fadeIn,
              duration: const Duration(milliseconds: 150),
              replacement: true // pushReplacement 或者 push
            );
          },
          child: const Text('Go to page 2', style: TextStyle(color: Colors.white)),
        )
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
        elevation: 0,
        centerTitle: true,
        backgroundColor: Colors.black87,
      ),
      backgroundColor: Colors.green,
      body: const Center(
        child: Text('Second'),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用route_transition_dev插件来实现路由过渡动画的一个示例。route_transition_dev插件允许你自定义页面间的过渡动画。为了演示，我们将创建一个简单的Flutter应用，其中包含两个页面，并使用route_transition_dev插件在两个页面之间进行自定义过渡动画。

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

dependencies:
  flutter:
    sdk: flutter
  route_transition_dev: ^最新版本号  # 请替换为当前最新版本号

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

接下来，让我们编写一些代码。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        switch (settings.name) {
          case '/':
            return _createRoute(HomeScreen(), settings);
          case '/second':
            return _createRoute(SecondScreen(), settings);
          default:
            return MaterialPageRoute(builder: (_) => Scaffold(body: Center(child: Text('404'))));
        }
      },
    );
  }

  Route<dynamic> _createRoute(Widget screen, RouteSettings settings) {
    return PageTransition(
      settings: settings,
      child: screen,
      type: PageTransitionType.fade, // 你可以使用其他过渡类型，比如slide, scale等
      alignment: Alignment.center,
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  }
}

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, '/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_transition_dev依赖。
  2. MaterialApp配置：在MyApp类中，我们配置了MaterialApp，并覆盖了onGenerateRoute方法，以使用自定义路由过渡动画。
  3. 自定义路由：在_createRoute方法中，我们使用PageTransition来创建自定义路由。你可以通过更改PageTransitionType来设置不同的过渡动画效果，比如fade, slide, scale等。
  4. HomeScreen：这是我们的主页，包含一个按钮，点击按钮会导航到SecondScreen。
  5. SecondScreen：这是我们的第二个页面，显示一些简单的文本。

通过这种方式，你可以很容易地在Flutter应用中使用route_transition_dev插件来实现自定义的路由过渡动画。如果你需要更复杂的动画效果，可以进一步探索PageTransition类的其他属性和方法。

回到顶部