Flutter波形动画插件simple

Flutter波形动画插件simple_wave的使用

插件介绍

simple_wave 是一个用于在Flutter中创建波形动画的插件。它可以帮助开发者快速地在界面上添加动态的波形效果。

使用方法

首先，你需要将 simple_wave 添加到你的 pubspec.yaml 文件中作为依赖项。
然后，在你的代码中导入并使用 SimpleWaveWidget 方法来创建波形动画。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Simple Wave Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.black,
      ),
      home: SimpleWaveExample(),
    );
  }
}

class SimpleWaveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Wave"),
      ),
      body: body(context),
    );
  }

  Widget body(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          itemView(
            context,
            "Simple Wave in Box",
            SimpleWaveInBox(),
          ),
          SizedBox(
            height: 1,
          ),
          itemView(
            context,
            "Simple Wave Full Screen",
            SimpleWaveFullScreen(),
          ),
          SizedBox(
            height: 1,
          ),
          itemView(
            context,
            "Simple Wave Playground",
            SimpleWavePlayground(),
          ),
          SizedBox(
            height: 1,
          ),
          itemView(
            context,
            "Simple Water Wave",
            SimpleWaterWave(),
          ),
        ],
      ),
    );
  }

  Widget itemView(BuildContext context, String text, Widget navigate) {
    return ElevatedButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) {
              return navigate;
            },
          ),
        );
      },
      child: Text(
        text,
        style: TextStyle(),
      ),
    );
  }

  class SimpleWaveInBox extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Simple Wave in Box"),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 1,
            color: Colors.orange,
            child: SimpleWaveWidget(
              waveWidth: 300, // this changes width of wave
              waveHeight: 1, // this changes height of wave
              waveColor: Colors.blue, // this changes color of wave
              amplitude: 50, // this changes height of wave
              waveMilliseconds: 5000, //this changes speed of wave
              numberOfWave: 10, //this changes number of waves
            ),
          ),
        ),
      );
    }
  }

  class SimpleWaveFullScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Simple Wave Full Screen"),
        ),
        body: SimpleWaveWidget(
          waveHeight: MediaQuery.sizeOf(context).height,
          waveWidth: MediaQuery.sizeOf(context).width,
        ),
      );
    }
  }

  class SimpleWavePlayground extends StatefulWidget {
    @override
    _SimpleWavePlaygroundState createState() => _SimpleWavePlaygroundState();
  }

  class _SimpleWavePlaygroundState extends State<SimpleWavePlayground> {
    double amplitude = 10;
    int r = 2;
    int g =  e;
    int b =  e;
    double waveHeight = 300;
    double waveWidth = 2;
    int numberOfWave = 3;

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Simple Wave Playground"),
        ),
        body: Stack(
          children: [
            SimpleWaveWidget(
              amplitude: amplitude,
              waveColor: Color.fromARGB(2, r, g, b),
              waveHeight: waveHeight,
              waveMilliseconds: 1000,
              waveWidth: waveWidth,
              numberOfWave: numberOfWave,
            ),
            body(),
          ],
        ),
      );
    }

    Widget body() {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            textView("Wave Amplitude"),
            Slider(
              min: 1,
              max: 100,
              value: amplitude,
              onChanged: (value) {
                amplitude = value;
                _notify();
              },
            ),
            textView("Wave Color"),
            Slider(
              activeColor: Colors.red,
              min: 1,
              max: 2,
              value: r.toDouble(),
              onChanged: (value) {
                r = value.toInt();
                _notify();
              },
            ),
            Slider(
              activeColor: Colors.green,
              min: 1,
              max: 2,
              value: g.toDouble(),
              onChanged: (value) {
                g = value.toInt();
                _notify();
              },
            ),
            Slider(
              activeColor: Colors.blue,
              min: 1,
              max: 255,
              value: b.toDouble(),
              onChanged: (value) {
                b = value.toInt();
                _notify();
              },
            ),
            textView("Wave Height"),
            Slider(
              min: 1,
              max: MediaQuery.of(context).size.height - 100,
              value: waveHeight,
              onChanged: (value) {
                waveHeight = value;
                _notify();
              },
            ),
            textView("Wave Width"),
            Slider(
              min: 1,
              max: MediaQuery.of(context).size.width,
              value: waveWidth,
              onChanged: (value) {
                waveWidth = value;
                _notify();
              },
            ),
            textView("Number of Waves"),
            Slider(
              min: 1,
              max: 100,
              value: numberOfWave.toDouble(),
              onChanged: (value) {
                numberOfWave = value.toInt();
                _notify();
              },
            ),
          ],
        ),
      );
    }

    Widget textView(String text) {
      return Text(
        text,
        style: TextStyle(
          color: Colors.blue,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      );
    }

    _notify() {
      if ( (mounted) setState(() {});
    }
  }

  class SimpleWaterWave extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Simple Water Wave"),
        ),
        body: Stack(
          children: [
            SimpleWaveWidget(
              waveHeight: MediaQuery.sizeOf(context).height,
              waveWidth: MediaQuery.size_of(context).width,
              waveColor: Colors.blue.withOpacity(0.7),
              amplitude: 2,
            ),
            SimpleWaveWidget(
              waveHeight: MediaQuery.size_of(context).height,
              waveWidth: MediaQuery.size_of(context).width,
              waveColor: Colors.blue.withOpacity(0.5),
              amplitude: 2,
              waveMilliseconds: 3000,
            ),
            SimpleWaveWidget(
              waveHeight: MediaQuery.size_of(context).height,
              waveWidth: MediaQuery.size_of(context).width,
              waveColor: Colors.blue,
              waveMilliseconds: 2000,
            )
          ],
        ),
      );
    }
  }
}

示例说明

导入简单波形插件:

import 'package:simple_wave/simple_wave.dart';

创建简单的波形动画:

SimpleWaveWidget(
    waveWidth: 300, // 波形宽度
    waveHeight: 150, // 波形高度
    waveColor: Colors.blue, // 波形颜色
    amplitude: 50, // 波形振幅
    waveMilliseconds: 5000, // 波形持续时间
    numberOfWave: 10, // 波形数量
)

全屏显示波形:

SimpleWaveWidget(
    waveHeight: MediaQuery.sizeOf(context).height,
    waveWidth: MediaQuery.sizeOf(context).width,
)

波形播放器:

SimpleWavePlayground()

水波形动画:

SimpleWaterWave()

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

htzhanglong 1楼•7 天前

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

当然，下面是一个关于如何在Flutter中使用simple_wave插件来创建波形动画的示例代码。首先，确保你已经在pubspec.yaml文件中添加了simple_wave依赖项：

dependencies:
  flutter:
    sdk: flutter
  simple_wave: ^latest_version  # 请替换为实际最新版本号

然后，运行flutter pub get来获取依赖项。

接下来是一个完整的Flutter应用示例，展示了如何使用simple_wave插件来创建波形动画：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Wave Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Wave Animation Demo'),
        ),
        body: Center(
          child: SimpleWaveAnimationExample(),
        ),
      ),
    );
  }
}

class SimpleWaveAnimationExample extends StatefulWidget {
  @override
  _SimpleWaveAnimationExampleState createState() => _SimpleWaveAnimationExampleState();
}

class _SimpleWaveAnimationExampleState extends State<SimpleWaveAnimationExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          width: double.infinity,
          height: 200,
          child: SimpleWave(
            waveColor: Colors.blue,
            amplitude: 50, // 波的振幅
            frequency: 2,  // 波的频率
            progress: _animation.value,
          ),
        ),
        SizedBox(height: 20),
        Slider(
          value: _controller.value,
          onChanged: (value) {
            // 这里直接设置值不会触发动画，仅用于演示手动调整
            setState(() {
              _controller.value = value;
            });
          },
          min: 0.0,
          max: 1.0,
          label: 'Manual Control',
        ),
      ],
    );
  }
}

在这个示例中：

SimpleWaveAnimationExample 是一个有状态的组件，它使用 AnimationController 来控制动画的进度。
SimpleWave 组件用于显示波形动画。你可以通过 waveColor、amplitude 和 frequency 等参数来定制波形动画的外观。
progress 参数用于控制波形的当前进度，这里通过动画值 _animation.value 来实现动画效果。
还在页面上添加了一个 Slider 控件，用于手动调整动画的进度（虽然这不会触发动画效果，但可以用来演示手动控制波形）。

运行这个示例应用，你应该会看到一个带有波形动画的屏幕，波形会随时间自动变化，并且你可以通过滑动条手动调整波形的当前位置。