ScoBro Foundation Flutter Voice

A Flutter package providing voice input widgets with speech-to-text functionality. This package offers a seamless voice input experience across mobile and web platforms with a push-to-talk interface.

Features

• Cross-platform voice input: Works on both mobile and web platforms
• Push-to-talk interface: Hold to speak, release to send
• Seamless text/voice switching: Users can type or use voice input interchangeably
• Real-time transcription: See your speech converted to text as you speak
• Web-optimized: Special handling for web platforms including context menu management
• Customizable UI: Configurable hint text, button text, and styling
• Auto-submission: Voice input automatically submits when you stop speaking
• Error handling: Graceful handling of speech recognition errors and unavailability

Platform Support

• ✅ Android: Full speech-to-text support
• ✅ iOS: Full speech-to-text support
• ✅ Web: Enhanced with mouse interaction and context menu management
• ✅ Desktop: Basic functionality (platform dependent on speech recognition availability)

Getting Started

Prerequisites

• Flutter SDK 1.17.0 or higher
• Dart SDK 3.6.1 or higher

Installation

Add this package to your pubspec.yaml:

dependencies:
  scobro_foundation_flutter_voice: ^0.0.1

Permissions

For mobile platforms, you'll need to add microphone permissions:

Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

iOS (ios/Runner/Info.plist):

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone for voice input</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>This app needs access to speech recognition for voice input</string>

Usage

Basic Implementation

import 'package:flutter/material.dart';
import 'package:scobro_foundation_flutter_voice/widgets/voice_or_type_input.dart';

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Voice Chat')),
      body: Column(
        children: [
          Expanded(
            child: Container(), // Your chat messages here
          ),
          VoiceOrTypeInput(
            onMessageSubmitted: (String message) {
              // Handle the submitted message
              print('Message: $message');
            },
          ),
        ],
      ),
    );
  }
}

Advanced Configuration

VoiceOrTypeInput(
  hintText: 'Ask me anything...',
  submitButtonText: 'Send',
  enabled: true,
  maxLines: 3,
  controller: myTextController, // Optional: provide your own controller
  onMessageSubmitted: (String message) {
    // Process the message
    handleUserMessage(message);
  },
)

With Custom Controller

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final TextEditingController _controller = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return VoiceOrTypeInput(
      controller: _controller,
      hintText: 'Type or speak your message...',
      onMessageSubmitted: (message) {
        // Handle message
        print('Received: $message');
        // Controller is automatically cleared after submission
      },
    );
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Widget Properties

Property	Type	Default	Description
onMessageSubmitted	Function(String)	Required	Callback when message is submitted
hintText	String	'Type a message or tap the mic...'	Placeholder text for input field
controller	TextEditingController?	null	Optional text controller
enabled	bool	true	Whether the widget is enabled
maxLines	int?	1	Maximum lines for text input
submitButtonText	String	'Send'	Text for submit button

How It Works

1. Text Mode: Users can type normally in the text field
2. Voice Mode: Hold the microphone button to start speech recognition
3. Real-time Transcription: Speech is converted to text and shown in the input field
4. Auto-submit: When you release the microphone button, the message is automatically submitted
5. Fallback: If voice recognition is unavailable, the widget gracefully falls back to text-only mode

Platform-Specific Features

Web Platform

• Uses Listener widget for precise mouse interaction control
• Automatically manages context menus during voice input
• Enhanced visual feedback for press-and-hold interaction

Mobile Platforms

• Uses GestureDetector for touch-optimized interaction
• Native speech recognition integration
• Haptic feedback support

Error Handling

The widget handles various error scenarios:

• Speech recognition unavailable
• Microphone permission denied
• Network connectivity issues
• Platform-specific speech recognition errors

When errors occur, the widget will:

• Show appropriate visual feedback
• Log errors for debugging
• Gracefully fall back to text input mode

Contributing

This package is part of the ScoBro Foundation Flutter ecosystem. For contributions, issues, or feature requests, please visit our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.