arrow_pad 1.0.0

A circular pad with 4 arrows that works as four buttons. Supports tap and hold callbacks, custom colors and icon styles.

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
• Hold support with onPressStart / onPressEnd

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.

Migrating to 1.0.0 (Flutter 3.47+)

Flutter 3.47 moved Material and Cupertino into the standalone material_ui and cupertino_ui packages. Version 1.0.0 of this package uses them, so your app must too:

flutter pub add material_ui cupertino_ui
dart fix --apply --code=migrate_design_widgets

If some of your other dependencies are not migrated yet, wrap your app with MaterialUiCompatibilityBridge. On older Flutter versions use arrow_pad: ^0.2.0.

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: ^1.0.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'),
),

To react while an arrow is held (for example to keep a character moving), use onPressStart and onPressEnd. Every start is followed by exactly one end for the same direction, even if the gesture is cancelled.

ArrowPad(
    onPressStart: (direction) => player.startMoving(direction),
    onPressEnd: (direction) => player.stopMoving(direction),
),

You can find more usage details in the /example.

Dependency

This package uses material_ui, cupertino_ui and cupertino_icons for the pad and the default arrow icon style.

Additional information

This package is licensed under BSD 3-Clause License