particles_network

Transform your app's UI with a breathtaking, high-performance particle network animation that reacts to touch and adapts seamlessly to any screen.

✨ Key Features

⚡ Ultra‑Smooth Rendering: Spatial partitioning grid and smart distance caching for minimal CPU overhead.
🛠 Fully Customizable: Adjust particle count, speed, size, colors, and connection distance.
👆 Touch-Responsive: Particles attract to touch points with configurable strength and color.
🔗 Dynamic Connections: Lines automatically draw between neighbors within a configurable radius.
📱 Responsive Layout: Auto‑scales across devices, orientations, and screen sizes.
🧠 Resource Efficient: Minimal allocations per frame, automatic cache cleanup, and optimized repainting.

Image

🖼️ Static Preview

Gif

✨ Touch Interaction Demo

🚀 Installation

direct

flutter pub add particles_network

OR

Add particles_network to your project's pubspec.yaml:

dependencies:
  particles_network: ^1.6.2

Run:

flutter pub get

🧪 Usage Example

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: ParticleNetwork(
          touchActivation: true,       // Enable touch interaction
          particleCount: 60,           // Number of particles
          maxSpeed: 0.7,               // Max particle velocity
          maxSize: 4.0,                // Max particle size
          lineDistance: 180,           // Connection radius
          particleColor: Colors.white,
          lineColor: const Color(0xFF4CFFA7),
          touchColor: Colors.amber,
        ),
      ),
    );
  }
}

🎛️ Configuration Options

⚙️ Property	🧾 Type	🧪 Default	📋 Description
`particleCount`	`int`	`50`	Total number of particles
`maxSpeed`	`double`	`0.5`	Maximum movement speed
`maxSize`	`double`	`3.5`	Maximum particle radius
`lineDistance`	`double`	`100`	Distance threshold for drawing lines
`particleColor`	`Color`	`Colors.white`	Particle fill color
`lineColor`	`Color`	`Colors.teal`	Color of connecting lines
`touchActivation`	`bool`	`false`	Enable touch-based attraction
`touchColor`	`Color`	`Colors.amber`	Color of lines created by touch

⚠️ Performance Tip: Increase particleCount with caution. Pair high counts with lower lineDistance to maintain frame rate.

🏎️ Under the Hood

🧩 Spatial Partitioning: Particles are binned into grid cells to limit neighbor searches.
🗂️ Distance Caching: Recent proximity checks are cached each frame to avoid redundant calculations.
🖌️ Efficient Repaints: CustomPainter’s shouldRepaint ensures redraws only when parameters change.
🧼 Memory Management: Typed arrays and frame‑scoped caches prevent memory churn.

🧠 Advanced Usage

🌗 Theme Adaptation: Wrap ParticleNetwork in AnimatedBuilder to animate colors for dark/light mode.
🌀 Custom Physics: Extend Particle class to introduce forces like gravity or repulsion.
🧱 Integration: Use inside any Flutter layout—Stack, Container, or as a background in Scaffold.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open a pull request or issue on GitHub.

📜 License

Distributed under the MIT License. See LICENSE for details.

Made with ❤️ by Dexter for Flutter developers