{"id":18000765,"url":"https://github.com/norbert515/pimp_my_button","last_synced_at":"2025-10-07T02:24:16.134Z","repository":{"id":52827141,"uuid":"147180924","full_name":"Norbert515/pimp_my_button","owner":"Norbert515","description":"Add particle effects to anything.","archived":false,"fork":false,"pushed_at":"2021-04-18T17:34:23.000Z","size":245,"stargazers_count":275,"open_issues_count":2,"forks_count":31,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T10:06:51.631Z","etag":null,"topics":["flutter","flutter-animation","flutter-package"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Norbert515.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-03T09:17:33.000Z","updated_at":"2024-10-29T07:29:03.000Z","dependencies_parsed_at":"2022-08-23T08:41:02.083Z","dependency_job_id":null,"html_url":"https://github.com/Norbert515/pimp_my_button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Norbert515%2Fpimp_my_button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Norbert515%2Fpimp_my_button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Norbert515%2Fpimp_my_button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Norbert515%2Fpimp_my_button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Norbert515","download_url":"https://codeload.github.com/Norbert515/pimp_my_button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-animation","flutter-package"],"created_at":"2024-10-29T23:13:57.059Z","updated_at":"2025-10-07T02:24:11.086Z","avatar_url":"https://github.com/Norbert515.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Showcase\n![pimp_my_button-showcase](media/pimp_my_gif.gif \"pimp_my_button-showcase\")\n\n# Features\n\n- Highly customizable (Don't like my particle effects? Make your own with little effort!)\n- Very easy to use\n- A lot of premade particles\n\n# Installation\n\nI will publish this package on pub if people enjoy it. So leave a star if you do ;)\n\n```yaml\ndependencies:\n  pimp_my_button: ^1.0.0\n```\nrun packages get and import it\n```\nimport 'package:pimp_my_button/pimp_my_button.dart';\n```\n**If you are not able to import it, restart your IDE see: https://github.com/flutter/flutter/issues/17016**\n\n# Basics\n\nThe basic setup looks like this:\n\n```dart\nPimpedButton(\n  particle: DemoParticle(),\n  pimpedWidgetBuilder: (context, controller) {\n    return FloatingActionButton(onPressed: () {\n      controller.forward(from: 0.0);\n    },);\n  },\n);\n```\nThe `pimpedWidgetBuilder` uses a builder which besides providing a new context and an `AnimationController`.\nWhen your button is pressed call this code:\n\n```dart\ncontroller.forward(from: 0.0);\n```\nIt's important to include the `from` field because otherwise the animation won't play after the first tap.\n\nThe particle specified in the `PimpedButton` controlls what the animation looks like.\n\n# Demo Particle Walk Through\n\nWe'll walk through how to build a `Particle` yourself, step by step. \n\nHere is what were are going to build:\n\n![fab](media/fab.gif \"fab\")\n\n\nEach particle has to extend `Particle` and override this method:\n`void paint(Canvas canvas, Size size, progress, seed)`\n- Canvas is the canvas you can paint on\n- The size is the bounding box of the the enclosing widget\n- Progress is a double between 0 and 1, it reflects the progress in the animation\n- The seed is an int value generated once for every tap. When dealing with randoms, initialize your\n`Random` with that seed (so every frame is synced)\n\n## The first particle\n```dart\nCompositeParticle(\n  children: []\n).paint(canvas, size, progressm seed);\n```\nYou have to paint atleast one `Particle` in the paint(.,.,.,) method. Usually this would be the `CompositeParticle`.\n\nThe `CompositeParticle` doesn't do much on its own. It only paints all of its children.\n\n\n## Adding actual particles\n\nThe next interesting particle is the `CircleMirror` and `RectangeMirror`.\n\n```dart\n    CircleMirror(\n        numberOfParticles: 6,\n        child: AnimatedPositionedParticle(\n          begin: Offset(0.0, 20.0),\n          end: Offset(0.0, 60.0),\n          child: FadingRect(width: 5.0, height: 15.0, color: Colors.pink),\n        ),\n        initialRotation: -pi / randomMirrorOffset),\n```\nThis mirrors its particle around the middle point in a circular shape.\nIn this case you provide one `Particle` which is going to be drawn multiple times, thus looking\nidentical. If you want different particles (or the same with randomized values), use the `CircleMirror.builder`.\n\nAt the bottom of the hierarchy is the `FadingRect`, all it does is drawing a rectangle which fades out over time. \nTo make it move, it's wrapped in an `AnimatedPositionedParticle`.\n\nThis is the full code:\n```dart\nclass DemoParticle extends Particle {\n  @override\n  void paint(Canvas canvas, Size size, progress, seed) {\n    Random random = Random(seed);\n    int randomMirrorOffset = random.nextInt(8) + 1;\n    CompositeParticle(children: [\n      Firework(),\n      CircleMirror(\n          numberOfParticles: 6,\n          child: AnimatedPositionedParticle(\n            begin: Offset(0.0, 20.0),\n            end: Offset(0.0, 60.0),\n            child: FadingRect(width: 5.0, height: 15.0, color: Colors.pink),\n          ),\n          initialRotation: -pi / randomMirrorOffset),\n      CircleMirror.builder(\n          numberOfParticles: 6,\n          particleBuilder: (index) {\n            return IntervalParticle(\n                child: AnimatedPositionedParticle(\n                  begin: Offset(0.0, 30.0),\n                  end: Offset(0.0, 50.0),\n                  child: FadingTriangle(\n                      baseSize: 6.0 + random.nextDouble() * 4.0,\n                      heightToBaseFactor: 1.0 + random.nextDouble(),\n                      variation: random.nextDouble(),\n                      color: Colors.green),\n                ),\n                interval: Interval(\n                  0.0,\n                  0.8,\n                ));\n          },\n          // division by 0 is not good ;)\n          initialRotation: -pi / randomMirrorOffset + 8),\n    ]).paint(canvas, size, progress, seed);\n  }\n}\n```\n\n\n# Notes\n\n### Some particles worth checking out:\n- `IntervalParticle`, applies an interval and/or curve to the child.\n- `FourRandomSlotParticle`, positions 4 children on the different sections.\n- `PoppingCircle`, pretty popping circle\n\n### Check out other demo particles:\nhttps://github.com/Norbert515/pimp_my_button/blob/master/lib/src/demo_particles.dart\n\n### You are not restricted to use the particles in the context of \"Pimp my button\", the particles can be drawn on any regular canvas.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorbert515%2Fpimp_my_button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnorbert515%2Fpimp_my_button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorbert515%2Fpimp_my_button/lists"}