Flutter语音输入插件micinputtextfield的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter语音输入插件 micinputtextfield 的使用

micinputtextfield 是一个提供类似 WhatsApp 文本框的图片、文本和音频输入功能的 Flutter 插件。本文将介绍如何在项目中集成并使用该插件。

安装

首先，在项目的 pubspec.yaml 文件中添加 micinputtextfield 作为依赖：

dependencies:
  micinputtextfield: ^version_number

请确保将 ^version_number 替换为最新版本号。

Android 配置

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

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

iOS 配置

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

<key>NSPhotoLibraryUsageDescription</key>
<string>Save video in gallery</string>
<key>NSMicrophoneUsageDescription</key>
<string>Save audio in video</string>

使用示例

下面是一个完整的示例，展示了如何在 Flutter 应用程序中使用 MicInputTextField。

示例代码

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:micinputtextfield/mic_input_textfield.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int noOfIncrement = 0;

  Future<bool> onSend(Output output) async {
    log("OnSend");
    noOfIncrement++;
    
    log(output.toJson().toString());
    log(noOfIncrement.toString());
    await Future.delayed(const Duration(seconds: 10));
    return true;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mic Input TextField Demo'),
        ),
        body: Center(
          child: MicInputTextField(
            onSend: (output) async {
              return await onSend(output);
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter语音输入插件micinputtextfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter语音输入插件micinputtextfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中使用micinputtextfield插件来实现语音输入功能的代码示例。micinputtextfield是一个Flutter插件，它允许用户通过麦克风输入文本。

首先，你需要在你的pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  micinputtextfield: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用MicInputTextField。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MicInputTextField Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MicInputTextField(
              controller: _controller,
              onError: (String error) {
                // 处理错误
                print("Error: $error");
              },
              onRecognitionComplete: (String text) {
                // 处理识别完成后的文本
                print("Recognized Text: $text");
                // 可选：将识别后的文本设置到TextEditingController中
                // _controller.value = TextEditingValue(text: text);
              },
              onResults: (List<String> results) {
                // 处理识别过程中的部分结果
                print("Partial Results: $results");
              },
              onPartialResults: (List<String> partialResults) {
                // 处理识别过程中的部分结果（与onResults不同，根据插件实现可能有所不同）
                print("Partial Results (Callback): $partialResults");
              },
              locale: "en-US",  // 设置识别语言，根据需要修改
              // 其他可配置参数...
            ),
            SizedBox(height: 20),
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Recognized Text',
                border: OutlineInputBorder(),
              ),
              enabled: false,  // 禁用手动输入，只显示识别结果
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个MicInputTextField和一个禁用的TextFormField来显示识别后的文本。MicInputTextField有几个回调函数，如onError、onRecognitionComplete、onResults和onPartialResults，你可以根据需要在这些回调中处理不同的识别状态和结果。

请确保在实际项目中根据micinputtextfield插件的文档和API调整代码，因为插件的API可能会随着版本更新而变化。

回到顶部