particles_network 1.9.0

A performant and customizable interactive particle network widget for Flutter. Ideal for background animations, landing pages, and visual effects.

particles_network

Transform your Flutter app’s UI with a high-performance particle network animation that responds to touch and adapts seamlessly to any screen size.

---

Features

• Ultra-High Performance

  • Advanced QuadTree spatial partitioning for O(log n) neighbor searches
  • Compressed QuadTree structure for optimal memory usage
  • Smart distance caching to minimize calculations
  • Efficient memory management with scoped caches

• Rich Customization

  • Control particle count, speed, size, and colors
  • Adjust connection distance and line thickness
  • Enable or disable touch interactions

• Responsive Design

  • Adapts to any screen size or orientation
  • Smooth animations at 60+ FPS
  • Touch-responsive with configurable effects

---

Demo

GIF Preview:

---

Installation

Add the package to your pubspec.yaml:

dependencies:
  particles_network: ^1.9.0

Then run:

flutter pub get

Or use the CLI:

flutter pub add particles_network

---

Quick Start

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: ParticleNetwork(
          particleCount: 60,
          maxSpeed: 0.5,
          maxSize: 1.5,
          lineWidth: 0.5,
          lineDistance: 120,
          particleColor: Colors.white,
          lineColor: const Color.fromARGB(255, 100, 255, 180),
          touchColor: Colors.amber,
          touchActivation: true,
          drawNetwork: true,
          fill: false,
          isComplex: false,
        ),
      ),
    );
  }
}

Full tutorial available

---

## Configuration Options

| Property          | Type     | Default        | Description                  |
| ----------------- | -------- | -------------- | ---------------------------- |
| `particleCount`   | `int`    | `60`           | Number of particles          |
| `maxSpeed`        | `double` | `0.5`          | Maximum particle speed       |
| `maxSize`         | `double` | `1.5`          | Maximum particle radius      |
| `lineWidth`       | `double` | `0.5`          | Line thickness               |
| `lineDistance`    | `double` | `100`          | Connection distance          |
| `particleColor`   | `Color`  | `Colors.white` | Particle color               |
| `lineColor`       | `Color`  | `Colors.teal`  | Connection line color        |
| `touchColor`      | `Color`  | `Colors.amber` | Highlight color on touch     |
| `touchActivation` | `bool`   | `true`         | Enables touch interaction    |
| `isComplex`       | `bool`   | `false`        | Optimizes complex scenes     |
| `fill`             | `bool`   | `true`         | Filled or outlined particles |
| `drawNetwork`     | `bool`   | `true`         | Draw lines between particles |

---

## Advanced Usage

### Theme Integration

```dart
AnimatedBuilder(
  animation: Theme.of(context),
  builder: (context, _) => ParticleNetwork(
    particleColor: Theme.of(context).primaryColor,
    lineColor: Theme.of(context).colorScheme.secondary,
    // other configs...
  ),
)

Background Usage

Stack(
  children: [
    ParticleNetwork(/* configuration */),
    YourAppContent(),
  ],
)

Performance Tips

• Reduce particleCount and lineDistance for weaker devices
• Use isComplex: true for high-density scenes
• Use fill: false for better performance and lighter visuals

---

Technical Details

The package uses an advanced Compressed QuadTree spatial data structure for efficient particle management.

final quadTree = CompressedQuadTreeNode(
  Rectangle(0, 0, screenWidth, screenHeight),
);

particles.forEach((particle) => 
  quadTree.insert(QuadTreeParticle(
    particle.id, 
    particle.x, 
    particle.y
  ))
);

final nearbyParticles = quadTree.queryCircle(
  touchX, 
  touchY, 
  searchRadius
);

Technical Details

• O(log n) insertion and query
• Path compression to reduce memory for clustered particles
• Smart node consolidation and rebalancing
• Memory-efficient structure with typed arrays and sparse representation

---

Contributing

We welcome contributions! See the contributing guide for more details.

License

This package is released under the MIT License.

---

Crafted with care and ❤️ by Dexter

---