particles_network 1.8.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.8.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: 100,
          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 here.

---

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

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

---