Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/immadisairaj/arrow_pad
A circular pad with 4 arrows which has a functionality of 4 buttons.
https://github.com/immadisairaj/arrow_pad
arrow-keys arrow-pad custom-widget customizable dart directional-buttons flutter flutter-package game-pad hacktoberfest keys package pub-dev pub-package
Last synced: about 1 month ago
JSON representation
A circular pad with 4 arrows which has a functionality of 4 buttons.
- Host: GitHub
- URL: https://github.com/immadisairaj/arrow_pad
- Owner: immadisairaj
- License: bsd-3-clause
- Created: 2022-02-22T11:47:08.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-16T13:32:11.000Z (over 1 year ago)
- Last Synced: 2024-05-02T03:38:52.223Z (8 months ago)
- Topics: arrow-keys, arrow-pad, custom-widget, customizable, dart, directional-buttons, flutter, flutter-package, game-pad, hacktoberfest, keys, package, pub-dev, pub-package
- Language: Dart
- Homepage: https://pub.dev/packages/arrow_pad
- Size: 7.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
An arrow pad which resembles the mp3 player button style. But instead, there are 4 arrows.
![Arrow Pad Demo](https://user-images.githubusercontent.com/40348358/155262478-bf5d0f1a-6a4c-4233-9f58-032d5bcd2643.gif)
## Features
The package can be used in any plaform. It is platform independent.
- Customize the widget using your own styles
- Different icon styles
- Click trigger on tap down or tap up## Arrow Pad Playground
To vew different features/functionalities, you can view [Arrow Pad Playground](https://arrowpad.immadisairaj.dev). Or, you can use the [Zapp](https://zapp.run/pub/arrow_pad) to play around with the example of this package.
## Migrations (from 0.1.5 to 0.2.0)
Deprecated `onPressedUp`, `onPressedRight`, `onPressedDown` and `onPressedLeft` is replaced with `onPressed`.
```dart
// Before
ArrowPad(
onPressedUp: () => print('up'),
onPressedLeft: () => print('left'),
onPressedRight: () => print('right'),
onPressedDown: () => print('down'),
),
// After
ArrowPad(
onPressed: (direction) => print(direction),
),
```## Setup
There is no special setup required, just add the dependency in `pubspec.yaml`, import the file, and you are good to go..
Add the dependency in `pubspec.yaml`
```yaml
arrow_pad: ^0.2.0 # Note: use latest version
```Import the widget into dart file
```dart
import 'package:arrow_pad/arrow_pad.dart';
```
## UsageThe default usage of the arrow pad:
```dart
// default usage
const ArrowPad(),
```The Arrow Pad can be customized with colors, icon styles and click trigger.
```dart
// custom usage
ArrowPad(
height: 80.0,
width: 80.0,
innerColor: Colors.blue,
arrowPadIconStyle: ArrowPadIconStyle.arrow,
clickTrigger: ClickTrigger.onTapDown,
onPressed: (direction) => print('Pressed $direction'),
),
```
![Screenshot 3](https://user-images.githubusercontent.com/40348358/155263058-8b760258-b7a4-4bc0-976e-b4d02f7b0120.png)You can find more usage details in the [`/example`](https://github.com/immadisairaj/arrow_pad/tree/main/example).
## Dependency
This package uses [`cupertino_icons`](https://pub.dev/packages/cupertino_icons) for the default arrow icon style.
## Additional information
This package is licensed under [BSD 3-Clause License](https://github.com/immadisairaj/arrow_pad/blob/main/LICENSE)