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

Arrow Pad Demo

Screenshot 1 Screenshot 2


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
    onPressedUp: () => print('up'),
    onPressedLeft: () => print('left'),
    onPressedRight: () => print('right'),
    onPressedDown: () => print('down'),
// After
    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

The Arrow Pad can be customized with colors, icon styles and click trigger.

// custom usage
    height: 80.0,
    width: 80.0,
    arrowPadIconStyle: ArrowPadIconStyle.arrow,
    clickTrigger: ClickTrigger.onTapDown,
    onPressed: (direction) => print('Pressed $direction'),

Screenshot 3

You can find more usage details in the /example.


This package uses cupertino_icons for the default arrow icon style.

Additional information

This package is licensed under BSD 3-Clause License


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