fluid_simulation 1.0.0

A widget that renders an interactive fluid simulation, based on double-density relaxation. Supports interactivity via tap or mouse hover and device orientation.

Fluid Simulation Widget for Flutter

A widget that renders an interactive fluid simulation in Flutter, based on double-density relaxation. Supports interactivity via tap or mouse hover and device orientation.

Features

• Customizable fluid color, particle count, and various simulation parameters
• Tap and drag, hover your mouse, or rotate your device to interact with the fluid
• Two render modes: individual points or blobs (metaballs)

Installation

Add the package to your pubspec.yaml file:

dependencies:
  fluid_simulation: ^1.0.0

Then add the included shaders to the flutter section:

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

Run flutter pub get to install the package.

Usage

Import the widget:

import 'package:fluid_simulation/fluid_simulation.dart';

And add it to your app:

FluidSimulationWidget(
  color: Colors.blue,
  particleCount: 500,
  renderMode: RenderMode.blobs,
  child: YourCustomWidget(),
)

Customization

The simulation and fluid appearance can be customized with various parameters:

• color: The color of the fluid (defaults to the primary color of the current theme)
• particleCount: The number of particles in the simulation (default: 500)
• stiffness: The stiffness constant for the pressure constraint (default: 90)
• stiffnessNear: The stiffness constant for the near-pressure constraint (default: 120)
• restDensity: The rest density of the fluid (default: 10)
• interactionRadius: The radius around a particle in which it interacts with neighboring particles (default: 46)
• gravityMagnitude: The magnitude of the gravity force applied to the particles (default: 400)
• renderMode: The render mode of the particles, either as individual points or metaballs (default: blobs)
• gradientRadius: The radius of the density gradient used for rendering blobs (default: 32)
• pointerEnabled: Whether the fluid particles are affected by tap or mouse hover (default: true)
• orientationEnabled: Whether gravity is determined by the device orientation (default: true)

A child widget is also supported:

• child: An optional child widget to render UI elements on top of the fluid simulation

Related Works

This fluid simulation is based on double-density relaxation and was ported from LÖVE Fluid Simulation with significant help from Claude.

See also:

• Particle-based Viscoelastic Fluid Simulation: The paper describing double-density relaxation.
• Simulating Blobs of Fluid: The article that inspired the original author to build their first fluid simulation.