Flutter波形动画插件wave的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter波形动画插件wave的使用

wave 是一个用于在Flutter应用中显示波形动画的插件。通过该插件，您可以轻松创建各种波形动画效果，以增强应用程序的视觉吸引力。

Demo 示例

您可以通过以下链接查看 wave 插件的效果演示：

平台 分支 URL
Web master wave.glorylab.xyz
Web develop dev.wave.glorylab.xyz

开始使用

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

dependencies:
  wave: ^最新版本号

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

基本示例代码

下面是一个简单的示例，展示了如何使用 wave 插件创建一个波形动画：

import 'package:flutter/material.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wave Demo'),
        ),
        body: Center(
          child: WaveWidget(
            config: CustomConfig(
              colors: [
                Color(0xFFFEE440),
                Color(0xFF00BBF9),
              ],
              durations: [
                5000,
                4000,
              ],
              heightPercentages: [
                0.65,
                0.66,
              ],
            ),
            backgroundColor: Color(0xFFF15BB5),
            size: Size(double.infinity, double.infinity),
            waveAmplitude: 0,
          ),
        ),
      ),
    );
  }
}

更复杂的示例

以下是来自官方示例的更复杂的应用程序，展示了多种不同的波形配置和用法：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

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

final String appName = 'Demo WAVE';
final String repoURL = 'https://github.com/glorylab/wave';

class WaveDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        useMaterial3: true,
      ),
      home: WaveDemoHomePage(title: appName),
    );
  }
}

class WaveDemoHomePage extends StatefulWidget {
  WaveDemoHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _WaveDemoHomePageState createState() => _WaveDemoHomePageState();
}

class _WaveDemoHomePageState extends State<WaveDemoHomePage> {
  Widget _buildCard({
    required Config config,
    Color? backgroundColor = Colors.transparent,
    DecorationImage? backgroundImage,
    double height = 152.0,
  }) {
    return Container(
      height: height,
      width: double.infinity,
      child: Card(
        elevation: 12.0,
        margin: EdgeInsets.only(
            right: marginHorizontal, left: marginHorizontal, bottom: 16.0),
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(16.0))),
        child: WaveWidget(
          config: config,
          backgroundColor: backgroundColor,
          backgroundImage: backgroundImage,
          size: Size(double.infinity, double.infinity),
          waveAmplitude: 0,
        ),
      ),
    );
  }

  double marginHorizontal = 16.0;

  void _launchUrl(url) async {
    if (!await launchUrl(Uri.parse(url))) throw 'Could not launch $url';
  }

  @override
  Widget build(BuildContext context) {
    marginHorizontal = 16.0 +
        (MediaQuery.of(context).size.width > 512
            ? (MediaQuery.of(context).size.width - 512) / 2
            : 0);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
        elevation: 2.0,
        actions: [
          IconButton(
            onPressed: () {
              _launchUrl(repoURL);
            },
            icon: Icon(Icons.code), // 替换为GitHub图标
          )
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: <Widget>[
                SizedBox(height: 16.0),
                _buildCard(
                  backgroundColor: Colors.purpleAccent,
                  config: CustomConfig(
                    gradients: [
                      [Colors.red, Color(0xEEF44336)],
                      [Colors.red[800]!, Color(0x77E57373)],
                      [Colors.orange, Color(0x66FF9800)],
                      [Colors.yellow, Color(0x55FFEB3B)]
                    ],
                    durations: [35000, 19440, 10800, 6000],
                    heightPercentages: [0.20, 0.23, 0.25, 0.30],
                    gradientBegin: Alignment.bottomLeft,
                    gradientEnd: Alignment.topRight,
                  ),
                ),
                _buildCard(
                  height: 256.0,
                  backgroundImage: DecorationImage(
                    image: NetworkImage(
                      'https://images.unsplash.com/photo-1554779147-a2a22d816042?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540',
                    ),
                    fit: BoxFit.cover,
                    colorFilter: ColorFilter.mode(Colors.white, BlendMode.softLight),
                  ),
                  config: CustomConfig(
                    colors: [
                      Colors.pink[400]!,
                      Colors.pink[300]!,
                      Colors.pink[200]!,
                      Colors.pink[100]!
                    ],
                    durations: [18000, 8000, 5000, 12000],
                    heightPercentages: [0.85, 0.86, 0.88, 0.90],
                  ),
                ),
                _buildCard(
                  config: CustomConfig(
                    colors: [
                      Colors.white70,
                      Colors.white54,
                      Colors.white30,
                      Colors.white24,
                    ],
                    durations: [32000, 21000, 18000, 5000],
                    heightPercentages: [0.25, 0.26, 0.28, 0.31],
                  ),
                  backgroundColor: Colors.blue[600],
                ),
                Align(
                  child: Container(
                    height: 128,
                    width: 128,
                    decoration: BoxDecoration(shape: BoxShape.circle, boxShadow: [
                      BoxShadow(
                        color: Color(0xFF9B5DE5),
                        blurRadius: 2.0,
                        spreadRadius: -5.0,
                        offset: Offset(0.0, 8.0),
                      ),
                    ]),
                    child: ClipOval(
                      child: WaveWidget(
                        config: CustomConfig(
                          colors: [
                            Color(0xFFFEE440),
                            Color(0xFF00BBF9),
                          ],
                          durations: [
                            5000,
                            4000,
                          ],
                          heightPercentages: [
                            0.65,
                            0.66,
                          ],
                        ),
                        backgroundColor: Color(0xFFF15BB5),
                        size: Size(double.infinity, double.infinity),
                        waveAmplitude: 0,
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 88,
                ),
                Container(
                  alignment: Alignment.center,
                  margin: const EdgeInsets.all(16),
                  child: Column(
                    children: [
                      Image.asset(
                        'icons/ic_glory_lab.png', // 需要替换为实际存在的图标路径
                        width: 32.0,
                        height: 32.0,
                      ),
                      const SizedBox(height: 8),
                      Text(
                        'Made in Glory Lab',
                        style: TextStyle(color: Colors.grey[500]),
                      )
                    ],
                  ),
                ),
                Container(
                  height: 48,
                  child: WaveWidget(
                    config: CustomConfig(
                      colors: [
                        Colors.indigo[400]!,
                        Colors.indigo[300]!,
                        Colors.indigo[200]!,
                        Colors.indigo[100]!
                      ],
                      durations: [18000, 8000, 5000, 12000],
                      heightPercentages: [0.65, 0.66, 0.68, 0.70],
                    ),
                    size: Size(double.infinity, double.infinity),
                    waveAmplitude: 0,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这个示例展示了不同类型的波形配置，包括渐变色、背景图片等，并且展示了如何将波形动画嵌入到卡片组件中。

希望这些信息对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，我可以为你提供一个关于如何在Flutter中使用wave插件来实现波形动画的代码示例。wave插件是一个非常流行的Flutter包，用于创建动态的波浪效果。

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

dependencies:
  flutter:
    sdk: flutter
  wave: ^0.x.x  # 请替换为最新版本号

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

接下来是一个简单的示例代码，展示如何在Flutter中使用wave插件来创建波形动画：

import 'package:flutter/material.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';

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

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

class WaveAnimationScreen extends StatefulWidget {
  @override
  _WaveAnimationScreenState createState() => _WaveAnimationScreenState();
}

class _WaveAnimationScreenState extends State<WaveAnimationScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final waveConfig = WaveConfig(
      lines: 12,
      length: 0.2,
      amplitude: 20,
      waveHeight: 15,
      animationDuration: _controller.duration,
      color: Colors.blue.withOpacity(0.3),
      backgroundColor: Colors.grey.withOpacity(0.3),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Wave Animation'),
      ),
      body: Center(
        child: WaveWidget(
          config: waveConfig,
          size: Size(double.infinity, 200),
          progress: _controller.value,
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在首页上显示了一个波形动画。以下是代码的关键部分：

  1. 依赖项：在pubspec.yaml文件中添加了wave依赖项。
  2. WaveConfig：配置波形动画的参数，如线条数量、长度、振幅、波形高度、动画持续时间和颜色。
  3. AnimationController：控制动画的进度，使其能够循环播放和反向播放。
  4. WaveWidget：将波形动画渲染到屏幕上。

你可以根据需要调整WaveConfig中的参数，以创建不同的波形效果。例如，改变线条数量、振幅、颜色等。

希望这个示例代码能够帮助你在Flutter中使用wave插件实现波形动画。如果有任何问题或需要进一步的帮助，请随时告诉我！

回到顶部