An arrow pad which resembles the mp3 player button style. But instead, there are 4 arrows.
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
To vew different features/functionalities, you can view Arrow Pad Playground. Or, you can use the Zapp to play around with the example of this package.
Deprecated onPressedUp
, onPressedRight
, onPressedDown
and onPressedLeft
is replaced with onPressed
.
// Before
ArrowPad(
onPressedUp: () => print('up'),
onPressedLeft: () => print('left'),
onPressedRight: () => print('right'),
onPressedDown: () => print('down'),
),
// After
ArrowPad(
onPressed: (direction) => print(direction),
),
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
arrow_pad: ^0.2.0 # Note: use latest version
Import the widget into dart file
import 'package:arrow_pad/arrow_pad.dart';
The default usage of the arrow pad:
// default usage
const ArrowPad(),
![Screenshot 1](https://private-user-images.githubusercontent.com/40348358/241748022-27208d5f-0c71-4d6d-8457-6108b493422d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5ODIxNTAsIm5iZiI6MTcyNTk4MTg1MCwicGF0aCI6Ii80MDM0ODM1OC8yNDE3NDgwMjItMjcyMDhkNWYtMGM3MS00ZDZkLTg0NTctNjEwOGI0OTM0MjJkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDE1MjQxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE0Nzk1ODEwZTllNTA1OTJmODcyMDFjNTNiYWU2NjBkNDNhNGZmOTAzMThkZDQzMTE3ZDBhNzI0Yzc0OWVmZmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.oSAEVzulqbjXQ9XH20JqRRHLDz6OAdkJE7s4IXFAfKY)
The Arrow Pad can be customized with colors, icon styles and click trigger.
// custom usage
ArrowPad(
height: 80.0,
width: 80.0,
innerColor: Colors.blue,
arrowPadIconStyle: ArrowPadIconStyle.arrow,
clickTrigger: ClickTrigger.onTapDown,
onPressed: (direction) => print('Pressed $direction'),
),
You can find more usage details in the /example
.
This package uses cupertino_icons
for the default arrow icon style.
This package is licensed under BSD 3-Clause License