particles_network 1.6.3

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

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

Gif

---

🚀 Installation

direct

flutter pub add particles_network

OR

Add particles_network to your project's pubspec.yaml:

dependencies:
  particles_network: ^1.6.3

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: 3.5,                // 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