Zweycinder/spider_web_control

Spider Web Control

Static Badge Static Badge Static Badge

A customizable spider web control widget for Flutter that detects touch directions with interactive visual effects.

Features

Customizable appearance: Change colors, size, and web structure
Direction detection: Get callbacks for 8-directional touch input (R, L, F, B, FR, FL, BR, BL)
Interactive effects: Web threads warp and bend around touch points
Flexible integration: Works with any connection type (Bluetooth, HTTP, WebSocket, etc.)
Theme support: Built-in dark and light theme configurations

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  spider_web_control: ^0.0.2

Usage

Basic Usage

import 'package:spider_web_control/spider_web_control.dart';

SpiderWebControl(
  onDirectionChanged: (direction) {
    print('Direction: $direction');
    // Handle direction change (e.g., send to device)
  },
)

Custom Configuration

SpiderWebControl(
  config: SpiderWebConfig(
    size: 400.0,
    threadColor: Colors.cyan,
    dewDropColor: Colors.lightBlue,
    centerThreshold: 100.0,
    sendInterval: Duration(milliseconds: 500),
  ),
  onDirectionChanged: (direction) {
    // Your custom logic here
  },
  onTouchStart: () => print('Touch started'),
  onTouchEnd: () => print('Touch ended'),
)

Using with Bluetooth

class MyBluetoothController extends StatelessWidget {
  final BluetoothConnection connection;

  MyBluetoothController({required this.connection});

  @override
  Widget build(BuildContext context) {
    return SpiderWebControl(
      config: SpiderWebConfig.darkTheme(size: 350.0),
      onDirectionChanged: (direction) {
        // Send direction to Bluetooth device
        connection.output.add(Uint8List.fromList(direction.codeUnits));
      },
    );
  }
}

Theme Examples

// Dark theme
SpiderWebControl(
  config: SpiderWebConfig.darkTheme(size: 300.0),
  onDirectionChanged: (direction) => handleDirection(direction),
)

// Light theme
SpiderWebControl(
  config: SpiderWebConfig.lightTheme(size: 300.0),
  onDirectionChanged: (direction) => handleDirection(direction),
)

// Custom theme
SpiderWebControl(
  config: SpiderWebConfig(
    size: 320.0,
    threadColor: Colors.purple,
    minorThreadColor: Colors.purpleAccent,
    dewDropColor: Colors.pink,
    radialDivisions: 48,
    circleDivisions: 30,
  ),
  onDirectionChanged: (direction) => handleDirection(direction),
)

Configuration Options

Property	Type	Default	Description
`size`	`double`	`300.0`	Size of the spider web widget
`threadColor`	`Color`	`Colors.blue`	Main thread color
`minorThreadColor`	`Color`	`Colors.blueGrey`	Minor thread color
`dewDropColor`	`Color`	`Colors.lightBlue`	Dew drop accent color
`centerThreshold`	`double`	`80.0`	Dead zone radius in center
`sendInterval`	`Duration`	`Duration(seconds: 1)`	Minimum time between direction callbacks
`radialDivisions`	`int`	`36`	Number of radial web divisions
`circleDivisions`	`int`	`25`	Number of circular web divisions

Direction Values

The widget returns these direction strings:

'R' - Right
'L' - Left
'F' - Forward/Up
'B' - Back/Down
'FR' - Forward-Right
'FL' - Forward-Left
'BR' - Back-Right
'BL' - Back-Left
'Disabled Zone' - Center area (not sent to callback)

License

MIT License - see LICENSE file for details.