Flutter动画过渡插件 `wave_transition` 的使用

wave_transition 是一个用于在页面之间实现平滑波浪过渡效果的Flutter插件。无需编写冗长的代码，即可轻松添加漂亮的过渡动画。

效果预览

example

开始使用

添加依赖

首先，在您的 pubspec.yaml 文件中添加 wave_transition 依赖：

dependencies:
  flutter:
    sdk: flutter
  wave_transition:

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

使用示例

以下是一个完整的示例，展示了如何使用 WaveTransition 在两个页面之间进行导航，并传递参数。

示例代码

import 'package:flutter/material.dart';
import 'secondScreen.dart'; // 假设这是第二个页面的文件
import 'package:wave_transition/wave_transition.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FirstScreen(),
    ),
  );
}

class FirstScreen extends StatefulWidget {
  [@override](/user/override)
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
        backgroundColor: Colors.orange[500],
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              WaveTransition(
                child: SecondScreen(),
                center: FractionalOffset(0.90, 0.90),
                duration: Duration(milliseconds: 3000), // 可选，默认为1秒
                settings: RouteSettings(arguments: "Yeah! It works!"), // 传递参数
              ),
            );
          },
          child: Text('Go to Second Screen'),
          style: ElevatedButton.styleFrom(
            primary: Colors.orange[500],
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
          ),
        ),
      ),
    );
  }
}

第二个页面 (`SecondScreen`)

为了完整起见，这里展示一下 SecondScreen 的简单实现：

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
        backgroundColor: Colors.orange[500],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              args ?? "No arguments passed",
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Back'),
              style: ElevatedButton.styleFrom(primary: Colors.orange[500]),
            ),
          ],
        ),
      ),
    );
  }
}

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

songsunli 1楼•4 小时前

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

当然，以下是如何在Flutter项目中使用wave_transition插件来实现动画过渡的示例代码。wave_transition是一个用于在Flutter应用中创建波浪动画过渡效果的插件。

首先，你需要在pubspec.yaml文件中添加wave_transition依赖项：

dependencies:
  flutter:
    sdk: flutter
  wave_transition: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter应用中，你可以使用WaveTransition来实现页面之间的波浪动画过渡。以下是一个简单的示例，展示如何在两个页面之间使用波浪过渡。

主页面（main.dart）

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wave Transition Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              WaveTransition(
                child: SecondScreen(),
                type: WaveType.rightToLeft, // 波浪过渡的方向
                color: Colors.blue, // 波浪的颜色
              ),
            );
          },
          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!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pop(context);
        },
        tooltip: 'Back',
        child: Icon(Icons.arrow_back),
      ),
    );
  }
}

在这个示例中，我们有两个页面：MyHomePage和SecondScreen。在MyHomePage中，我们有一个按钮，当用户点击这个按钮时，会触发一个波浪动画过渡，将用户导航到SecondScreen。WaveTransition类用于定义波浪过渡的动画效果，其中type属性指定了波浪的方向，color属性指定了波浪的颜色。

你可以根据需要调整WaveTransition的属性，以实现不同的动画效果。例如，你可以尝试使用WaveType.leftToRight、WaveType.topToBottom等不同的过渡方向，或者更改波浪的颜色以匹配你的应用主题。

Flutter动画过渡插件wave_transition的使用

Flutter动画过渡插件 wave_transition 的使用