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

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.