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

在Flutter中，overlap_transition 是一个非常实用的插件，可以实现页面之间的过渡动画效果。本文将详细介绍如何使用该插件来创建一个带有重叠动画的页面过渡。

示例效果展示

以下是使用 overlap_transition 插件实现的页面过渡动画效果：

使用步骤

Step 1: 安装控制器

首先，我们需要创建一个 OverlapTransitionController 对象来控制动画的前进和后退。

final controller = OverlapTransitionController();

Step 2: 导入依赖

在项目中导入 overlap_transition 插件。

import 'package:overlap_transition/overlap_transition.dart';

Step 3: 添加 OverlapTransition 小部件

接下来，我们将使用 OverlapTransition 小部件来定义页面过渡动画。以下是完整的代码示例：

return OverlapTransition(
  // 动画持续时间
  duration: Duration(seconds: 1),
  // 动画曲线
  curves: Curves.decelerate,

  // 控制器对象
  overlapTransitionController: controller,

  // 主页面 (primary widget)
  primary: Scaffold(
    body: Center(
      child: ElevatedButton(
        onPressed: () => controller.forward(), // 前进到次级页面
        child: Text("Next"),
      ),
    ),
  ),

  // 次级页面 (secondary widget)
  secundary: Scaffold(
    body: Center(
      child: ElevatedButton(
        onPressed: () => controller.reverse(), // 返回到主页面
        child: Text("Back"),
      ),
    ),
  ),
);

详细说明

• primary: 表示主页面的 widget。
• secundary: 表示次级页面的 widget。
• controller: 用于控制动画的前进 (forward) 和后退 (reverse)。

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 overlap_transition 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 创建控制器
  final controller = OverlapTransitionController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OverlapTransition(
      duration: Duration(seconds: 1), // 动画时长
      curves: Curves.decelerate, // 动画曲线

      overlapTransitionController: controller,

      // 主页面
      primary: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => controller.forward(), // 跳转到次级页面
            child: Text("Next"),
          ),
        ),
      ),

      // 次级页面
      secundary: Scaffold(
        appBar: AppBar(
          title: Text("Secondary Page"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => controller.reverse(), // 返回到主页面
            child: Text("Back"),
          ),
        ),
      ),
    );
  }
}