Flutter语音搜索功能插件voice_search的使用

简介

voice_search 是一个为 Flutter 应用程序提供的可自定义的语音识别组件。该插件支持多语言，并且可以在多个平台上运行，包括 Web、Android、iOS、macOS、Windows 和 Linux。

特性

• 语音识别：轻松执行语音搜索。
• 可定制化：可以调整颜色、图标、大小和动画以适应应用的设计。
• 多语言支持：支持多种语言进行语音识别。
• 平台支持：在 Web、Android、iOS、macOS、Windows 和 Linux 上工作。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  voice_search: ^latest_version

使用方法

在 Dart 文件中导入该包：

import 'package:voice_search/voice_search.dart';

基本示例

这是一个基本的使用示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Voice Search Example')),
        body: Center(
          child: VoiceSearchWidget(
            onResult: (result) {
              print('Voice Search Result: $result');
            },
          ),
        ),
      ),
    );
  }
}

自定义设置

你可以通过传递不同的参数来自定义 VoiceSearchWidget：

VoiceSearchWidget(
  localeCode : Locales.ENGLISH_US, // 选择语言
  activeWidgetColor: Colors.green, // 激活时的颜色
  inactiveWidgetColor: Colors.red, // 非激活时的颜色
  activeIcon: Icons.mic, // 激活时的图标
  inactiveIcon: Icons.mic_none, // 非激活时的图标
  maxRadius: 40, // 最大半径
  minRadius: 20, // 最小半径
  animationDuration: Duration(milliseconds: 500), // 动画持续时间
  animationCurve: Curves.bounceIn, // 动画曲线
  onResult: (result) {
    print('Voice Search Result: $result');
  },
  onListeningStarted: () {
    print('Listening started');
  },
  onListeningStopped: () {
    print('Listening stopped');
  },
);

权限

Android

在 AndroidManifest.xml 中添加以下权限：

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

如果目标 Android SDK 30 或更高版本，则还需要添加以下内容：

<queries>
    <intent>
        <action android:name="android.speech.RecognitionService" />
    </intent>
</queries>

iOS

在 Info.plist 中添加以下权限：

<key>NSMicrophoneUsageDescription</key>
<string>我们需访问您的麦克风来执行语音搜索。</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>我们需要访问语音识别来执行语音搜索。</string>

示例

下面是一些使用示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Voice Search Examples',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: ExampleSelector(),
    );
  }
}

class ExampleSelector extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Voice Search Examples')),
      body: ListView(
        children: [
          _buildExampleTile(context, '基本用法', BasicUsageExample()),
          _buildExampleTile(context, '自定义组件', CustomizedWidgetExample()),
          _buildExampleTile(context, '可搜索列表', SearchableListExample()),
          _buildExampleTile(context, '组合搜索', CombinedSearchExample()),
          _buildExampleTile(context, '多语言支持', MultiLanguageExample()),
        ],
      ),
    );
  }

  Widget _buildExampleTile(BuildContext context, String title, Widget example) {
    return ListTile(
      title: Text(title),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => example),
      ),
    );
  }
}

class BasicUsageExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('基本用法')),
      body: Center(
        child: VoiceSearchWidget(
          onResult: (String result) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('你说了: $result')),
            );
          },
        ),
      ),
    );
  }
}

class CustomizedWidgetExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('自定义组件')),
      body: Center(
        child: VoiceSearchWidget(
          activeWidgetColor: Colors.red,
          inactiveWidgetColor: Colors.grey,
          activeIcon: Icons.mic,
          inactiveIcon: Icons.mic_none,
          elevation: 4.0,
          borderColor: Colors.black,
          animationDuration: Duration(milliseconds: 500),
          animationCurve: Curves.bounceOut,
          onResult: (String result) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('你说了: $result')),
            );
          },
        ),
      ),
    );
  }
}

class SearchableListExample extends StatefulWidget {
  [@override](/user/override)
  _SearchableListExampleState createState() => _SearchableListExampleState();
}

class _SearchableListExampleState extends State<SearchableListExample> {
  List<String> allItems = ['苹果', '香蕉', '樱桃', '枣', '接骨木果', '无花果', '葡萄'];
  List<String> filteredItems = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    filteredItems = allItems;
  }

  void _filterList(String query) {
    setState(() {
      filteredItems = allItems
          .where((item) => item.toLowerCase().contains(query.toLowerCase()))
          .toList();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('可搜索列表'),
        actions: [
          VoiceSearchWidget(
            onResult: _filterList,
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: filteredItems.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(filteredItems[index]));
        },
      ),
    );
  }
}

class CombinedSearchExample extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('组合搜索')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: '搜索...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 10),
                VoiceSearchWidget(
                  onResult: (String result) {
                    _controller.text = result;
                    // 执行搜索操作
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('正在搜索: $result')),
                    );
                  },
                ),
              ],
            ),
            SizedBox(height: 20),
            Text('语音搜索结果将出现在上方的文本框中。'),
          ],
        ),
      ),
    );
  }
}

class MultiLanguageExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('多语言示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('尝试使用不同语言说话:'),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _buildLanguageWidget(context, 'en_US', '英语'),
                _buildLanguageWidget(context, 'es_ES', '西班牙语'),
                _buildLanguageWidget(context, 'fr_FR', '法语'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLanguageWidget(BuildContext context, String localeCode, String language) {
    return Column(
      children: [
        Text(language),
        SizedBox(height: 10),
        VoiceSearchWidget(
          localeCode: localeCode,
          onResult: (String result) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('$language 结果: $result')),
            );
          },
        ),
      ],
    );
  }
}