flutter_joystick_customisable

A Flutter plugin for joystick with customisable options with custom properties as below,

Joystick(
    stickSize: 50,
    dragPadColor: Colors.red,
    onDragStart: () {
    // You can use this callback for your business case when the stick/ball start dragging
    },
    onDragEnd: () {
    // You can use this callback for your business case when the stick/ball stop dragging
    },
    dragCallback: (DragInfo? dragInfo) {
        setState(() {
          _dragInfo = dragInfo;
        });
    }
)
drawing

You can enable the button controls at out side of the drag pad and with default properties as below,

Joystick(dragCallback: (DragInfo? dragInfo) {
    setState(() {
      _dragInfo = dragInfo;
    });
  },
    enableButtonControls: true,
)

Screen_recording_20240102_074118.webm

Getting Started

Joystick is stateful widget to display the UI of the customisable joystick which has the below primary properties to handle it effectively.

Properties Type Description
stickSize double Size of the stick/ball to occupy the screen with the rest of the controls
timeFrequency Duration Frequency of calling dragCallback from the moment the stick is dragged.
draggableContainer Widget Widget that renders joystick base, by default DragPad of this library will take care of this part and the size of this widget will be varied based on the stick/ball size.
dragPadColor Color Specifies the color of the DragPad
stickController StickController Controller allows to control joystick events outside the widget.
onDragStart Function Callback, which is called when the stick starts dragging.
onDragEnd Function Callback, which is called when the stick released.
dragCallback StickDragCallback Callback, which is called with timeFrequency when the stick is dragged.
enableButtonControls bool Enable the button controls at out side of the drag pad. 
import 'package:flutter/material.dart';
import 'package:flutter_joystick_customisable/flutter_joystick_customisable.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DragInfo? _dragInfo;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Container(
            color: Colors.black,
            child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      "x: ${_dragInfo?.x ?? 0.0}, y: ${_dragInfo?.y ?? 0.0}",
                      style: const TextStyle(color: Colors.white),
                    ),
                    Joystick(
                        stickSize: 50,
                        dragPadColor: Colors.red,
                        onDragStart: () {
                          // You can use this callback for your business case when the stick/ball start dragging
                        },
                        onDragEnd: () {
                          // You can use this callback for your business case when the stick/ball stop dragging
                        },
                        dragCallback: (DragInfo? dragInfo) {
                          setState(() {
                            _dragInfo = dragInfo;
                          });
                        })
                  ],
                ))),
      ),
    );
  }
}

See the Demo for more detailed sample project.

Feel free to contribute to this package!! 🙇‍♂️

Always happy if anyone wants to help to improve this package!

If you need any features

Please open an issue so that we can discuss your feature request 🙏

Libraries

flutter_joystick_customisable