{"id":51535942,"url":"https://github.com/piedcipher/pressable_button","last_synced_at":"2026-07-09T08:30:45.747Z","repository":{"id":356665854,"uuid":"1233598215","full_name":"piedcipher/pressable_button","owner":"piedcipher","description":"🔘 A customizable 3D animated pressable button for Flutter with smooth depth and glow effects","archived":false,"fork":false,"pushed_at":"2026-05-13T11:59:36.000Z","size":510,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-01T10:24:14.157Z","etag":null,"topics":["3d","button","dart","flutter","ui"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/pressable_button","language":"C++","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/piedcipher.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-09T06:11:00.000Z","updated_at":"2026-06-19T11:10:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/piedcipher/pressable_button","commit_stats":null,"previous_names":["piedcipher/pressable_button"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piedcipher/pressable_button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piedcipher%2Fpressable_button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piedcipher%2Fpressable_button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piedcipher%2Fpressable_button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piedcipher%2Fpressable_button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piedcipher","download_url":"https://codeload.github.com/piedcipher/pressable_button/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piedcipher%2Fpressable_button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35293216,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-09T02:00:07.329Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["3d","button","dart","flutter","ui"],"created_at":"2026-07-09T08:30:45.130Z","updated_at":"2026-07-09T08:30:45.742Z","avatar_url":"https://github.com/piedcipher.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pressable_button\n\n[![Pub.dev](https://img.shields.io/pub/v/pressable_button.svg)](https://pub.dev/packages/pressable_button)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Flutter](https://img.shields.io/badge/Flutter-3.35.0+-blue.svg)](https://flutter.dev)\n\nA customizable 3D animated pressable button for Flutter with smooth depth and glow effects.\n\n\u003cvideo src='https://github.com/user-attachments/assets/5f45d0a8-e6f7-426f-a955-b49aa6578c62'\u003e\u003c/video\u003e\n\n## Features\n\n✨ **Smooth Press Animation** - Fluid 3D pressing effect with customizable duration\n\n🎨 **Highly Customizable** - Adjust colors, size, depth, and border radius\n\n💡 **Glow \u0026 Shadow Effects** - Professional-looking depth and lighting effects\n\n⚡ **Lightweight** - Zero external dependencies, minimal performance overhead\n\n🎯 **Easy to Use** - Simple API with sensible defaults\n\n♿ **Flexible Child Widget** - Use any widget inside the button (Text, Icon, Image, etc.)\n\n---\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Usage](#usage)\n- [API Reference](#api-reference)\n- [Advanced Examples](#advanced-examples)\n- [Performance](#performance)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Installation\n\nAdd `pressable_button` to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  pressable_button: ^0.0.4\n```\n\nThen run:\n\n```bash\nflutter pub get\n```\n\n### Version Requirements\n\n- **Flutter**: ≥3.35.0\n- **Dart**: ≥3.8.0\n\n---\n\n## Quick Start\n\nThe simplest way to use `PressableButton`:\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:pressable_button/pressable_button.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        backgroundColor: const Color(0xFF101010),\n        body: Center(\n          child: PressableButton(\n            onPressed: () {\n              debugPrint('Button pressed!');\n            },\n            child: const Text(\n              'Click Me',\n              style: TextStyle(\n                color: Colors.white,\n                fontSize: 24,\n                fontWeight: FontWeight.bold,\n              ),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n---\n\n## Usage\n\n### Basic Button\n\n```dart\nPressableButton(\n  onPressed: () {},\n  child: const Text('Press'),\n)\n```\n\n### Customized Button\n\n```dart\nPressableButton(\n  onPressed: () {\n    print('Button pressed!');\n  },\n  child: const Text('Custom Button'),\n  width: 220,\n  height: 60,\n  color: Colors.blue,\n  shadowColor: Colors.blue.shade900,\n  borderRadius: 16,\n  pressDepth: 24,\n  animationDuration: const Duration(milliseconds: 150),\n)\n```\n\n### Button with Icon\n\n```dart\nPressableButton(\n  onPressed: () {},\n  child: Row(\n    mainAxisAlignment: MainAxisAlignment.center,\n    children: [\n      const Icon(Icons.send, color: Colors.white),\n      const SizedBox(width: 8),\n      const Text('Send'),\n    ],\n  ),\n  color: Colors.purple,\n)\n```\n\n### Button in a Column\n\n```dart\nColumn(\n  mainAxisAlignment: MainAxisAlignment.center,\n  children: [\n    PressableButton(\n      onPressed: () =\u003e _handleStart(),\n      child: const Text('Start'),\n      color: Colors.green,\n    ),\n    const SizedBox(height: 20),\n    PressableButton(\n      onPressed: () =\u003e _handleStop(),\n      child: const Text('Stop'),\n      color: Colors.red,\n    ),\n  ],\n)\n```\n\n---\n\n## API Reference\n\n### PressableButton\n\nA stateful widget that creates a 3D pressable button with animation.\n\n#### Constructor\n\n```dart\nPressableButton({\n  required VoidCallback onPressed,\n  required Widget child,\n  double width = 200,\n  double height = 80,\n  Color color = Colors.green,\n  Color? shadowColor,\n  double borderRadius = 25,\n  double pressDepth = 32,\n  Duration animationDuration = const Duration(milliseconds: 100),\n})\n```\n\n#### Parameters\n\n| Parameter | Type | Default | Description |\n|---|---|---|---|\n| `onPressed` | `VoidCallback` | **required** | Callback function triggered when the button is pressed |\n| `child` | `Widget` | **required** | The widget displayed inside the button |\n| `width` | `double` | `200` | The width of the button |\n| `height` | `double` | `80` | The height of the button |\n| `color` | `Color` | `Colors.green` | The main color of the button |\n| `shadowColor` | `Color?` | `null` | The shadow color beneath the button. If null, uses a semi-transparent version of `color` |\n| `borderRadius` | `double` | `25` | The border radius of the button corners |\n| `pressDepth` | `double` | `32` | The depth of the press animation. Higher values = more pronounced effect |\n| `animationDuration` | `Duration` | `100ms` | The duration of the press animation |\n\n---\n\n## Advanced Examples\n\n### Example 1: Submit Button with Loading State\n\n```dart\nclass SubmitButton extends StatefulWidget {\n  @override\n  State\u003cSubmitButton\u003e createState() =\u003e _SubmitButtonState();\n}\n\nclass _SubmitButtonState extends State\u003cSubmitButton\u003e {\n  bool _isLoading = false;\n\n  Future\u003cvoid\u003e _handleSubmit() async {\n    setState(() =\u003e _isLoading = true);\n    \n    try {\n      // Simulate API call\n      await Future.delayed(const Duration(seconds: 2));\n      debugPrint('Submitted!');\n    } finally {\n      setState(() =\u003e _isLoading = false);\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return PressableButton(\n      onPressed: _isLoading ? () {} : _handleSubmit,\n      child: _isLoading\n          ? const SizedBox(\n              width: 20,\n              height: 20,\n              child: CircularProgressIndicator(\n                strokeWidth: 2,\n                valueColor: AlwaysStoppedAnimation(Colors.white),\n              ),\n            )\n          : const Text('Submit'),\n    );\n  }\n}\n```\n\n### Example 2: Game Button\n\n```dart\nPressableButton(\n  onPressed: () =\u003e _playGame(),\n  width: 180,\n  height: 70,\n  color: Colors.orange,\n  shadowColor: Colors.deepOrange,\n  borderRadius: 35,\n  pressDepth: 20,\n  animationDuration: const Duration(milliseconds: 120),\n  child: const Text(\n    'Play Game',\n    style: TextStyle(\n      color: Colors.white,\n      fontSize: 20,\n      fontWeight: FontWeight.bold,\n    ),\n  ),\n)\n```\n\n### Example 3: Rounded Button\n\n```dart\nPressableButton(\n  onPressed: () {},\n  width: 100,\n  height: 100,\n  borderRadius: 50, // Full circle\n  color: Colors.pink,\n  pressDepth: 16,\n  child: const Icon(\n    Icons.favorite,\n    color: Colors.white,\n    size: 40,\n  ),\n)\n```\n\n---\n\n## Performance\n\nThe `PressableButton` is designed to be lightweight and performant:\n\n- **No external dependencies** - Uses only Flutter framework\n- **Single animation** - Uses `AnimatedPadding` for efficient animation\n- **Minimal rebuilds** - Only rebuilds necessary widgets during animation\n- **Small widget tree** - Simple `Stack` + `GestureDetector` implementation\n\n### Animation Performance\n\nThe button uses `AnimatedPadding` with `Curves.easeInOut` for smooth animations. For 60fps displays, the default 100ms animation duration works well. Adjust `animationDuration` based on your design needs.\n\n---\n\n## Troubleshooting\n\n### Button doesn't animate\n\nEnsure `onPressed` is not null and the widget is properly initialized.\n\n### Animation feels jerky\n\nTry adjusting the `animationDuration` to a longer duration (e.g., 150ms or 200ms).\n\n### Shadow not visible\n\nMake sure the `shadowColor` has sufficient opacity. If not provided, it automatically uses a semi-transparent version of the main color.\n\n### Child widget overflowing\n\nWrap your child widget with `SizedBox` or use `Expanded` to constrain its size.\n\n---\n\n## Example App\n\nA complete example app is included in the `/example` folder.\n\nRun the example locally:\n\n```bash\ncd example\nflutter run\n```\n\n---\n\n## Repository\n\n- **GitHub**: [piedcipher/pressable_button](https://github.com/piedcipher/pressable_button)\n- **Issue Tracker**: [GitHub Issues](https://github.com/piedcipher/pressable_button/issues)\n- **Website**: [https://tirth.today](https://tirth.today)\n\n---\n\n### Development Setup\n\n1. Clone the repository\n2. Install dependencies: `flutter pub get`\n3. Run tests: `flutter test`\n4. Run the example: `cd example \u0026\u0026 flutter run`\n\n---\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\nMade with ❤️ by [Tirth Patel](https://tirth.today)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiedcipher%2Fpressable_button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiedcipher%2Fpressable_button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiedcipher%2Fpressable_button/lists"}