Flutter流体模拟插件fluid

Flutter流体模拟插件fluid_simulation的使用

一个用于Flutter的流体模拟小部件，基于双密度松弛技术。支持通过点击或鼠标悬停进行互动，并且可以根据设备的方向进行调整。

功能

可自定义的流体颜色、粒子数量和多种模拟参数
支持点击拖动、鼠标悬停或旋转设备来与流体互动
两种渲染模式：单个点或液滴（元球）

安装

在pubspec.yaml文件中添加包：

dependencies:
  fluid_simulation: ^1.0.4

然后在flutter部分添加包含的着色器：

flutter:
  # ...
  shaders:
    - packages/fluid_simulation/shaders/gradient.frag
    - packages/fluid_simulation/shaders/blobs.frag

运行flutter pub get以安装该包。

使用

导入小部件：

import 'package:fluid_simulation/fluid_simulation.dart';

将其添加到您的应用中：

FluidSimulationWidget(
  color: Colors.blue,       // 流体的颜色，默认为当前主题的主要颜色
  particleCount: 250,       // 模拟中的粒子数量
  gravityMagnitude: 0,      // 应用到粒子上的重力大小
  renderMode: RenderMode.blobs,  // 渲染模式为液滴
)

自定义

可以通过以下参数来自定义模拟和流体外观：

color: 流体的颜色（默认为当前主题的主要颜色）
particleCount: 模拟中的粒子数量
stiffness: 压力约束的刚度常数
stiffnessNear: 近似压力约束的刚度常数
restDensity: 流体的静止密度
interactionRadius: 粒子与其邻近粒子交互的半径
gravityMagnitude: 应用到粒子上的重力大小
renderMode: 粒子的渲染模式，可以是单个点或液滴
gradientRadius: 用于渲染液滴的密度梯度的半径
pointerEnabled: 是否使流体粒子受到点击或鼠标悬停的影响
orientationEnabled: 是否根据设备方向确定重力

还支持一个可选的子部件：

child: 一个可选的子部件，可以在流体模拟之上渲染UI元素

示例

Demo

查看演示：尝试演示

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluid Simulation Example'),
        ),
        body: Center(
          child: FluidSimulationWidget(
            color: Colors.blue,
            particleCount: 250,
            gravityMagnitude: 0,
            renderMode: RenderMode.blobs,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter流体模拟插件fluid_simulation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼•10 小时前

更多关于Flutter流体模拟插件fluid_simulation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter应用中使用fluid_simulation插件的示例代码。fluid_simulation插件允许你在Flutter应用中模拟流体效果。为了简洁起见，我将展示如何设置基本环境并运行一个简单的流体模拟。

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

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

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

接下来，创建一个Flutter项目（如果你还没有的话），并在lib/main.dart文件中编写以下代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fluid Simulation Example'),
        ),
        body: Center(
          child: FluidSimulationWidget(),
        ),
      ),
    );
  }
}

class FluidSimulationWidget extends StatefulWidget {
  @override
  _FluidSimulationWidgetState createState() => _FluidSimulationWidgetState();
}

class _FluidSimulationWidgetState extends State<FluidSimulationWidget> with SingleTickerProviderStateMixin {
  late FluidSimulationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化FluidSimulationController
    _controller = FluidSimulationController(
      size: Size(double.infinity, double.infinity), // 使用父容器大小
      gridSize: Size(400, 400), // 模拟网格大小
      numParticles: 1000, // 粒子数量
      viscosity: 0.01, // 粘性系数
      damping: 0.02, // 阻尼系数
      gravity: Offset(0, 0.1), // 重力方向
      buoyancy: 0.01, // 浮力系数
    );

    // 监听动画帧以更新流体模拟
    _controller.addListener(() {
      setState(() {});
    });

    // 开始模拟
    _controller.start();
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size.infinite,
      painter: FluidPainter(_controller),
    );
  }
}

class FluidPainter extends CustomPainter {
  final FluidSimulationController controller;

  FluidPainter(this.controller);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    // 获取模拟数据
    final particles = controller.particles;
    final gridSize = controller.gridSize;
    final scaleFactor = size.width / gridSize.width;

    for (final particle in particles) {
      final offset = Offset(
        particle.x * scaleFactor,
        particle.y * scaleFactor,
      );
      canvas.drawCircle(offset, 2 / scaleFactor, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true; // 每次状态改变时都重绘
  }
}

代码解释

依赖添加：在pubspec.yaml中添加fluid_simulation依赖。
主应用结构：在MyApp类中创建一个简单的Flutter应用，包含一个Scaffold和一个Center，其中放置了FluidSimulationWidget。
流体模拟控制器：在FluidSimulationWidget类中，初始化FluidSimulationController，并设置模拟参数，如网格大小、粒子数量、粘性系数等。
动画帧监听：通过_controller.addListener监听模拟帧的变化，并在每次变化时调用setState以更新UI。
自定义绘制：使用CustomPaint和FluidPainter类来绘制流体粒子。FluidPainter类从FluidSimulationController获取粒子数据，并在画布上绘制每个粒子。

请注意，fluid_simulation插件的实际API可能会有所不同，具体取决于其版本和更新情况。因此，在实际使用中，请参考插件的官方文档和示例代码进行调整。

Flutter流体模拟插件fluid_simulation的使用