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.

particles_network demo
Pub Version CI Status MIT License Code Coverage Pub Likes Pub Points

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

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

image2

  • 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

Libraries

model/connection_candidate
model/default_particle_factory
model/grid_cell
model/ip_article
model/particlemodel
model/rectangle
painter/connection_drawer
painter/distance_calculator
painter/optimized_network_painter
painter/particle_filter
painter/touch_interaction_handler
particles_network
quad_tree/compressed_quad_tree
quad_tree/compressed_quad_tree_node