Whether you're a designer or developer, Particular empowers you to bring your creative visions with ease.
Add particular
to your pubspec.yaml file:
For detailed installation instructions, refer to the installation guide on pub.dev.
You have two options for configuring your particles:
- Using Editors:
Generate your particles system configurations by Particular Editor.
- Programmatic Configuration:
Manually configure your particle controller in code. Refer to the following steps for more details.
To use this library, import package:particular/particular.dart
.
Follow these steps to integrate the particles system into your Flutter app:
I. Initialize the Particles Controller in initState
:
final _particleController = ParticularController();
...
@override
void initState() {
// Load particle configs file
String json = await rootBundle.loadString("assets/particle.json");
final configsData = jsonDecode(json);
// Load particle texture file
ByteData bytes = await rootBundle.load("assets/${configsData["textureFileName"]}");
ui.Image texture = await loadUIImage(bytes.buffer.asUint8List());
// Add particles layer
_particleController.addLayer(
texture: frameInfo.image, // Remove in default-texture case
configsData: configsData, // Remove in programmatic configuration case
);
super.initState();
}
II. Add the Particular
widget in your widget three:
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: Particular(
controller: _particleController,
),
),
);
}
III. Live Update Particle Layer:
_particleController.layers.first.update(
maxParticles: 100,
lifespan:1.2,
speed:100,
angle:30,
);
This revised README provides clear installation instructions, options for configuring particles, and steps for integrating and customizing the particle system in your Flutter app. If you have any questions or need further assistance, don't hesitate to ask!