immadisairaj/arrow_pad

A circular pad with 4 arrows which has a functionality of 4 buttons.

An arrow pad which resembles the mp3 player button style. But instead, there are 4 arrows.

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. Or, you can use the Zapp 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.

// 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

arrow_pad: ^0.2.0 # Note: use latest version

Import the widget into dart file

import 'package:arrow_pad/arrow_pad.dart';

Usage

The default usage of the arrow pad:

// default usage
const ArrowPad(),

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.

Dependency

This package uses cupertino_icons for the default arrow icon style.

Additional information

This package is licensed under BSD 3-Clause License