face_scanning_id

pub package License: MIT

A Flutter package providing customizable face scanning UI widgets with camera integration and visual feedback. Perfect for identity verification, biometric authentication, and face detection features.

Developed and maintained by UM Software

Features

✨ Customizable UI Components

  • Circular face scanning overlay with animated ring
  • Progress indicator for scanning feedback
  • Fully customizable colors, sizes, and styling

📷 Camera Integration

  • Built on top of Flutter's camera plugin
  • Support for front/back camera
  • Mirror preview option
  • Real-time camera preview

🎨 Visual Feedback

  • Animated scanning ring
  • Progress tracking
  • Status messages
  • Placeholder icons

Getting started

Installation

Add face_scanning_id to your pubspec.yaml:

dependencies:
  face_scanning_id: ^0.0.2

Install it:

flutter pub get

Platform Setup

iOS Configuration

Add camera permission to ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access for face scanning</string>

Android Configuration

Add camera permission to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="false" />

Usage

Basic Example

import 'package:face_scanning_id/face_scanning_id.dart';
import 'package:camera/camera.dart';

class FaceScanScreen extends StatefulWidget {
  @override
  _FaceScanScreenState createState() => _FaceScanScreenState();
}

class _FaceScanScreenState extends State<FaceScanScreen> {
  CameraController? _cameraController;
  bool _isScanning = false;
  double _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScanFaceWidget(
        diameter: 300,
        ringSize: 20,
        cameraController: _cameraController,
        isScanning: _isScanning,
        cameraInitialized: _cameraController?.value.isInitialized ?? false,
        progress: _progress,
        message: 'Position your face in the circle',
        onStartScanning: () {
          setState(() => _isScanning = true);
        },
        onUpdateOverlay: (circleRect, previewSize) {
          // Handle overlay updates
        },
      ),
    );
  }
}

Customization

ScanFaceWidget(
  diameter: 300,
  ringSize: 20,
  borderColor: Colors.blue,
  progressColor: Colors.green,
  backgroundColor: Colors.black,
  textColor: Colors.white,
  buttonColor: Colors.blue,
  strokeWidth: 8.0,
  // ... other parameters
)

Orientation Support

The package automatically handles device orientation changes (portrait and landscape). The camera preview dynamically adjusts to maintain proper aspect ratio without distortion across all screen orientations.

Features:

  • ✅ Automatic aspect ratio adjustment for portrait and landscape modes
  • ✅ No distortion or flattening of camera preview during rotation
  • ✅ Camera view properly fills the circular overlay in all orientations
  • ✅ Smooth transition between orientation changes

To enable orientation support in your app:

import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Allow all orientations
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
  
  runApp(MyApp());
}

Note: The camera preview automatically adapts when the device rotates. No additional configuration is required.

API Reference

ScanFaceWidget Parameters

Parameter Type Description
diameter double Diameter of the scanning circle
ringSize double Size of the ring around the circle
cameraController CameraController? Camera controller instance
isScanning bool Whether scanning is active
progress double Scanning progress (0.0 - 1.0)
message String Status message to display
borderColor Color Color of the circle border
progressColor Color Color of the progress indicator
onStartScanning VoidCallback? Callback when scanning starts
onUpdateOverlay Function? Callback for overlay updates

Additional information

Contributing

Contributions are welcome! Please read our Contributing Guidelines before submitting a pull request.

Support

If you encounter any issues or have questions:

License

This package is licensed under the MIT License.

About

Developed and maintained by UM Software - creating high-quality Flutter packages and applications.

For version history, see the CHANGELOG.

Libraries

face_scanning_id
A Flutter package providing customizable face scanning UI widgets.