spider_web_control

Spider Web Control

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

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.