如何为Flutter项目添加音频录制功能：flutter_deer实践指南

【免费下载链接】flutter_deer 🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图，更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project. 项目地址: https://gitcode.com/gh_mirrors/fl/flutter_deer

flutter_deer是一个功能丰富的Flutter练习项目，包含完整UI设计图和各类实用功能模块。本指南将带你快速掌握在flutter_deer项目中集成音频录制功能的方法，无需深入复杂代码即可实现专业级音频采集功能。

准备工作：环境与依赖配置

在开始前，请确保你的开发环境已满足以下条件：

• Flutter SDK版本2.0以上
• 已安装Android Studio或Xcode开发工具
• 项目已配置好基础权限管理

首先克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/fl/flutter_deer

添加音频录制依赖

在项目根目录的pubspec.yaml文件中添加音频录制相关依赖：

dependencies:
  flutter_sound: ^9.2.13
  permission_handler: ^10.2.0

执行依赖安装命令：

flutter pub get

配置平台权限

音频录制需要获取设备的麦克风权限，需分别配置Android和iOS平台。

Android平台配置

编辑android/app/src/main/AndroidManifest.xml文件，添加麦克风权限：

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

iOS平台配置

编辑ios/Runner/Info.plist文件，添加权限描述：

<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风以录制音频</string>
<key>NSDocumentsDirectoryUsageDescription</key>
<string>需要访问文档目录以保存录制文件</string>

实现音频录制功能

创建音频录制服务类

在lib/util/目录下创建audio_recorder.dart文件，实现音频录制核心功能：

import 'package:flutter_sound/flutter_sound.dart';
import 'package:permission_handler/permission_handler.dart';

class AudioRecorder {
  final FlutterSoundRecorder _recorder = FlutterSoundRecorder();
  bool _isRecording = false;
  String? _recordingPath;

  Future<bool> requestPermission() async {
    var status = await Permission.microphone.request();
    return status.isGranted;
  }

  Future<void> startRecording() async {
    if (!_isRecording) {
      await _recorder.openRecorder();
      _recordingPath = '/path/to/save/audio${DateTime.now().millisecondsSinceEpoch}.aac';
      await _recorder.startRecorder(toFile: _recordingPath);
      _isRecording = true;
    }
  }

  Future<String?> stopRecording() async {
    if (_isRecording) {
      await _recorder.stopRecorder();
      await _recorder.closeRecorder();
      _isRecording = false;
      return _recordingPath;
    }
    return null;
  }

  bool get isRecording => _isRecording;
}

构建录制界面

在需要添加音频录制功能的页面（如lib/shop/page/目录下的适当页面）添加录制控件：

class AudioRecordPage extends StatefulWidget {
  @override
  _AudioRecordPageState createState() => _AudioRecordPageState();
}

class _AudioRecordPageState extends State<AudioRecordPage> {
  final AudioRecorder _audioRecorder = AudioRecorder();
  String _recordStatus = "点击开始录制";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("音频录制")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_recordStatus),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleRecording,
              child: Text(_audioRecorder.isRecording ? "停止录制" : "开始录制"),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _toggleRecording() async {
    if (_audioRecorder.isRecording) {
      String? path = await _audioRecorder.stopRecording();
      setState(() {
        _recordStatus = "录制完成，文件路径：$path";
      });
    } else {
      bool hasPermission = await _audioRecorder.requestPermission();
      if (hasPermission) {
        await _audioRecorder.startRecording();
        setState(() {
          _recordStatus = "正在录制...";
        });
      } else {
        _recordStatus = "未获得麦克风权限";
      }
    }
  }
}

集成到现有页面

以订单页面为例，我们可以在订单详情页面添加音频录制功能，方便商家记录订单备注信息。

编辑lib/order/page/order_info_page.dart文件，添加录制按钮：

// 在合适位置添加录制按钮
IconButton(
  icon: Icon(Icons.mic),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AudioRecordPage()),
    );
  },
)

订单页面集成效果

集成音频录制功能后的订单页面，可以让商家快速记录语音备注，提升工作效率。

测试与优化

功能测试

1. 运行应用并导航到添加了录制功能的页面
2. 点击录制按钮，检查是否请求权限
3. 测试录制、停止功能是否正常
4. 验证录制文件是否正确保存

体验优化

• 添加录制时长显示
• 实现录制波形动画
• 添加录音文件列表管理
• 支持录音文件分享功能

总结

通过本指南，你已成功在flutter_deer项目中集成了音频录制功能。这个功能可以广泛应用于订单备注、语音留言、商品说明等场景，提升应用的实用性和用户体验。

flutter_deer项目作为一个完整的Flutter练习平台，还包含了许多其他实用功能和最佳实践。你可以继续探索项目中的lib/order/、lib/shop/等模块，学习更多Flutter开发技巧。

如需了解项目更多功能，可以参考项目文档docs/CHANGELOG.md。

【免费下载链接】flutter_deer 🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图，更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project. 项目地址: https://gitcode.com/gh_mirrors/fl/flutter_deer