Flutter页面过渡动画插件transitions_page的使用

Flutter页面过渡动画插件transitions_page的使用

本包帮助在屏幕之间实现路由过渡动画。

使用示例

/// [context] BuildContext
/// [page] Widget
TransitionsPage(
   context: context, 
   child: Page2(),
   animation: AnimationType.fadeIn,
   duration: Duration(milliseconds: 300),
);

完整示例代码

在 example/main.dart 文件中：

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

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

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

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面 1'),
        backgroundColor: Colors.transparent,
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: MaterialButton(
          child: Text('前往页面 2'),
          color: Colors.white,
          onPressed: () {
            // 跳转到页面2并设置过渡动画
            TransitionsPage(
              context: context, 
              child: Page2(),
              animation: AnimationType.fadeIn,
              duration: Duration(milliseconds: 300),
              //replacement: true,
            );
          },
        )
      ),
    );
  }
}

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

说明

  1. 导入包:

    import 'package:transitions_page/transitions_page.dart';

  2. 配置MaterialApp:

    return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Transition',
  initialRoute: 'page1',
  routes: {
    'page1': (_) => Page1(),
    'page2': (_) => Page2(),
  },
);

  3. 定义Page1页面:

    • 在按钮点击事件中使用 TransitionsPage 进行页面跳转，并设置过渡动画。
    onPressed: () {
  // 跳转到页面2并设置过渡动画
  TransitionsPage(
    context: context, 
    child: Page2(),
    animation: AnimationType.fadeIn,
    duration: Duration(milliseconds: 300),
    //replacement: true,
  );
},

  4. 定义Page2页面:

    • 页面2的构建逻辑非常简单，仅用于展示过渡效果。
    return Scaffold(
  appBar: AppBar(
    title: Text('页面 2'),
    backgroundColor: Colors.transparent,
  ),
  backgroundColor: Colors.green,
  body: Center(
    child: Text('页面 2'),
  ),
);

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

1 回复

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


transitions_page 是一个用于 Flutter 的页面过渡动画插件，它提供了多种内置的页面过渡效果，可以帮助你轻松地为应用程序添加流畅的页面切换动画。以下是使用 transitions_page 插件的基本步骤和示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 transitions_page 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  transitions_page: ^1.0.0  # 请使用最新版本

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

2. 基本使用

transitions_page 插件提供了多种过渡效果，你可以通过 TransitionsPage 类来使用这些效果。

示例：使用 FadeTransition

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              TransitionsPage(
                child: SecondPage(),
                transitionType: TransitionType.fade,
                duration: Duration(milliseconds: 500),
              ),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了 FadeTransition 过渡效果来切换到第二个页面。

3. 其他过渡效果

transitions_page 提供了多种过渡效果，你可以通过 transitionType 参数来指定不同的过渡效果。以下是一些常用的过渡效果：

  • TransitionType.fade：淡入淡出效果
  • TransitionType.scale：缩放效果
  • TransitionType.slide：滑动效果
  • TransitionType.rotation：旋转效果
  • TransitionType.size：大小变化效果
  • TransitionType.slideUp：向上滑动效果
  • TransitionType.slideDown：向下滑动效果
  • TransitionType.slideLeft：向左滑动效果
  • TransitionType.slideRight：向右滑动效果

示例：使用 SlideTransition

Navigator.push(
  context,
  TransitionsPage(
    child: SecondPage(),
    transitionType: TransitionType.slideLeft,
    duration: Duration(milliseconds: 500),
  ),
);

4. 自定义过渡动画

如果你需要更复杂的过渡动画，你可以通过 TransitionsPage.custom 构造函数来自定义过渡动画。

示例：自定义过渡动画

Navigator.push(
  context,
  TransitionsPage.custom(
    child: SecondPage(),
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return ScaleTransition(
        scale: CurvedAnimation(
          parent: animation,
          curve: Curves.easeInOut,
        ),
        child: child,
      );
    },
    duration: Duration(milliseconds: 500),
  ),
);
回到顶部