search

manjav / particular

Enhance your app or game visuals with this high-performance Flutter Particles System widget
MIT License
11 stars 0 forks source link
flutter particle-physics particles

readme

Particular Logo

Enhance your app or game visuals with this high-performance Flutter Particles System widget. Utilize JSON or programmatic configuration, seamlessly integrating with popular particles editors for effortless customization.


  • Customizable (live) Particle Effects.
  • Ready Presets (JSON Configs).
  • Seamless Integration with Editors.
  • Optimized Performance with 1~10k particle at frame Whether you're a designer or developer, Particular empowers you to bring your creative visions with ease. --- ### - Some Presets:

    Meteor Galaxy Snow Meteor --- ### - Installation Add `particular` to your pubspec.yaml file: For detailed installation instructions, refer to the [installation guide](https://pub.dev/packages/particular/install) on pub.dev.
    --- ### - Configurate your particles You have two options for configuring your particles: 1. Using Editors: Generate your particles system configurations by [Particular Editor](https://manjav.github.io/particular).


    2. Programmatic Configuration: Manually configure your particle controller in code. Refer to the following steps for more details. --- ### - Getting Started with Coding Follow these steps to integrate the particles system into your Flutter app:
    I. Insert Particle Files into Your Project:
    The [Particular Editor](https://manjav.github.io/particular) exports one or multiple particle layers. For each particle layer, it generates a configuration file (configs.json) and a related image file (texture.png). In the configuration file, there is a node named textureFileName, which refers to the image file. Place the image and configs.json file in your project's assets folder, and add the necessary assets entry in your pubspec.yaml file. ``` yml assets: - assets/configs.json - assets/texture.png ``` https://docs.flutter.dev/ui/assets/assets-and-images
    II. Initialize the Particles Controller in `initState`: To use this library, import `package:particular/particular.dart`.
    ``` dart final _particleController = ParticularController(); ... @override void initState() { _loadParticleAssets(); super.initState(); } // Load configs and texture of particle Future _loadParticleAssets() async { // Load particle configs file String json = await rootBundle.loadString("assets/configs.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 ); } ```
    III. Add the `Particular` widget in your widget three: ``` dart @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.black, body: Particular( controller: _particleController, ), ), ); } ```
    IIII. Live Update Particle Layer: ``` dart _particleController.layers.first.update( maxParticles: 100, lifespan:1.2, speed:100, angle:30, ); ```
    You can also use different image types supported by Flutter, with varying names and locations, following the guidelines below: ``` json { "textureFileName": "images/particle_snow.webp" } ``` ``` yml assets: - assets/data/particle_snow.json - assets/images/particle_snow.webp ``` ``` dart ... // Load particle configs file String json = await rootBundle.loadString("assets/data/particle_snow.json"); ... ``` --- 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!