flutter_hand_gesture 0.1.0

A Flutter package for real-time hand gesture recognition using on-device ML. Supports custom gestures, landmark detection, and stream-based API. No internet required.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hand_gesture/flutter_hand_gesture.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hand Gesture Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const GestureDemo(),
    );
  }
}

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

  @override
  State<GestureDemo> createState() => _GestureDemoState();
}

class _GestureDemoState extends State<GestureDemo> {
  HandGesture? _lastGesture;
  int _detectionCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // Camera View — plug and play
          GestureCameraView(
            config: const GestureConfig(
              minConfidence: 0.75,
              maxHands: 2,
              debounceDuration: Duration(milliseconds: 600),
              showLandmarks: true,
            ),
            onGestureDetected: (gesture) {
              setState(() {
                _lastGesture = gesture;
                _detectionCount++;
              });
            },
          ),

          // Top bar
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      '✋ Hand Gesture',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 6),
                      decoration: BoxDecoration(
                        color: Colors.white12,
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Text(
                        '$_detectionCount detected',
                        style: const TextStyle(color: Colors.white70),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

          // Last gesture panel
          if (_lastGesture != null)
            Positioned(
              top: 100,
              right: 16,
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.black.withValues(alpha: 0.7),
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(color: Colors.cyanAccent.withValues(alpha: 0.5)),
                ),
                child: Column(
                  children: [
                    Text(
                      _lastGesture!.emoji,
                      style: const TextStyle(fontSize: 40),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      _lastGesture!.displayName,
                      style: const TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      '${(_lastGesture!.confidence * 100).round()}%',
                      style: const TextStyle(color: Colors.cyanAccent),
                    ),
                    Text(
                      _lastGesture!.handedness.name,
                      style: const TextStyle(
                        color: Colors.white54,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }
}