Flutter实战：从零实现微信风格语音发送按钮与交互页面

2025年10月12日 互联网

一、项目需求分析与交互设计

微信语音消息发送的核心交互包含三个阶段：长按录音、滑动取消、松开发送。开发者需要重点解决以下技术难点：

  1. 按钮状态机管理（正常/录音中/取消）
  2. 录音时长控制（1秒触发/60秒限制）
  3. 滑动取消的视觉反馈
  4. 录音波形动态渲染

通过Flutter的GestureDetector和AnimationController组合，可以精准控制各状态转换。建议采用状态模式设计按钮行为，将不同手势操作映射到具体状态。

二、语音按钮核心实现

2.1 基础按钮结构

  1. class VoiceButton extends StatefulWidget {
  2.   @override
  3.   _VoiceButtonState createState() => _VoiceButtonState();
  4. }
  6. class _VoiceButtonState extends State<VoiceButton> {
  7.   VoiceButtonStatus _status = VoiceButtonStatus.normal;
  8.   final _animationController = AnimationController(
  9.     duration: const Duration(milliseconds: 300),
  10.     vsync: this,
  11.   );
  13.   @override
  14.   void dispose() {
  15.     _animationController.dispose();
  16.     super.dispose();
  17.   }
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     return GestureDetector(
  22.       onLongPressStart: _handleLongPressStart,
  23.       onLongPressMoveUpdate: _handleMoveUpdate,
  24.       onLongPressEnd: _handleLongPressEnd,
  25.       child: AnimatedBuilder(
  26.         animation: _animationController,
  27.         builder: (context, child) {
  28.           return Container(
  29.             width: 70 + _animationController.value * 10,
  30.             height: 70 + _animationController.value * 10,
  31.             decoration: BoxDecoration(
  32.               shape: BoxShape.circle,
  33.               color: _status == VoiceButtonStatus.cancel 
  34.                 ? Colors.red[400] 
  35.                 : Colors.green[400],
  36.             ),
  37.             child: Center(
  38.               child: Icon(
  39.                 _status == VoiceButtonStatus.recording 
  40.                   ? Icons.mic 
  41.                   : Icons.mic_off,
  42.                 size: 30 + _animationController.value * 5,
  43.               ),
  44.             ),
  45.           );
  46.         },
  47.       ),
  48.     );
  49.   }
  50. }

2.2 状态管理实现

采用枚举类型管理三种核心状态：

  1. enum VoiceButtonStatus {
  2.   normal,     // 初始状态
  3.   recording,  // 录音中
  4.   cancel      // 滑动取消
  5. }

通过AnimationController控制按钮尺寸变化：

  • 长按时触发放大动画（0.8→1.2倍）
  • 取消时触发红色闪烁效果
  • 发送后恢复原始尺寸

三、录音功能集成

3.1 录音插件选择

推荐使用flutter_sound插件，其优势包括：

  • 支持iOS/Android双平台
  • 提供实时音频流回调
  • 内置录音权限处理

配置步骤：

  1. 添加依赖：

    1. dependencies:
    2. flutter_sound: ^9.2.13

  2. 初始化录音器：
    ```dart
    final _recorder = FlutterSoundRecorder();

Future _initRecorder() async {
const codec = Codec.aacADTS;
await _recorder.openRecorder();
await _recorder.setSubscriptionDuration(
const Duration(milliseconds: 100),
);
}

  2. ## 3.2 录音控制逻辑
  3. ```dart
  4. void _startRecording() async {
  5.   if (_status != VoiceButtonStatus.recording) {
  6.     setState(() {
  7.       _status = VoiceButtonStatus.recording;
  8.       _animationController.forward();
  9.     });
  11.     await _recorder.startRecorder(
  12.       toFile: 'audio_${DateTime.now().millisecondsSinceEpoch}.aac',
  13.       codec: Codec.aacADTS,
  14.     );
  16.     // 启动录音时长监控
  17.     _recordingTimer = Timer.periodic(
  18.       const Duration(seconds: 1),
  19.       (timer) {
  20.         if (_recordingDuration >= 60) {
  21.           _stopRecording(isCancelled: false);
  22.         } else {
  23.           _recordingDuration++;
  24.         }
  25.       },
  26.     );
  27.   }
  28. }
  30. void _stopRecording({required bool isCancelled}) async {
  31.   _recordingTimer?.cancel();
  32.   await _recorder.stopRecorder();
  34.   if (mounted) {
  35.     setState(() {
  36.       _status = isCancelled 
  37.         ? VoiceButtonStatus.cancel 
  38.         : VoiceButtonStatus.normal;
  39.       _animationController.reverse();
  40.     });
  42.     if (!isCancelled && _recordingDuration >= 1) {
  43.       // 处理音频文件
  44.       final audioFile = File('audio_${DateTime.now().millisecondsSinceEpoch}.aac');
  45.       // 上传或播放逻辑...
  46.     }
  47.   }
  48. }

四、波形动画实现

4.1 自定义波形组件

  1. class WaveForm extends StatefulWidget {
  2.   final Stream<List<double>> amplitudeStream;
  4.   const WaveForm({required this.amplitudeStream, Key? key}) : super(key: key);
  6.   @override
  7.   _WaveFormState createState() => _WaveFormState();
  8. }
  10. class _WaveFormState extends State<WaveForm> {
  11.   List<double> _amplitudes = [];
  13.   @override
  14.   void initState() {
  15.     super.initState();
  16.     widget.amplitudeStream.listen((amplitudes) {
  17.       if (mounted) {
  18.         setState(() {
  19.           _amplitudes = amplitudes;
  20.         });
  21.       }
  22.     });
  23.   }
  25.   @override
  26.   Widget build(BuildContext context) {
  27.     return AspectRatio(
  28.       aspectRatio: 2,
  29.       child: CustomPaint(
  30.         painter: WaveFormPainter(_amplitudes),
  31.       ),
  32.     );
  33.   }
  34. }
  36. class WaveFormPainter extends CustomPainter {
  37.   final List<double> amplitudes;
  39.   WaveFormPainter(this.amplitudes);
  41.   @override
  42.   void paint(Canvas canvas, Size size) {
  43.     final paint = Paint()
  44.       ..color = Colors.green[300]!
  45.       ..strokeWidth = 2
  46.       ..style = PaintingStyle.stroke;
  48.     final path = Path();
  49.     final pointCount = amplitudes.length;
  50.     final stepX = size.width / (pointCount - 1);
  52.     for (int i = 0; i < pointCount; i++) {
  53.       final x = i * stepX;
  54.       final y = size.height / 2 * (1 - amplitudes[i].clamp(0, 1));
  56.       if (i == 0) {
  57.         path.moveTo(x, y);
  58.       } else {
  59.         path.lineTo(x, y);
  60.       }
  61.     }
  63.     canvas.drawPath(path, paint);
  64.   }
  66.   @override
  67.   bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
  68. }

4.2 实时数据流处理

通过flutter_sound的onRecorderStateChanged获取实时振幅数据：

  1. _recorder.setSubscriptionDuration(const Duration(milliseconds: 50));
  2. final amplitudeStream = _recorder.onRecorderStateChanged
  3.   ?.map((event) => event.dbPeakLevel ?? 0)
  4.   .map((db) => (1 + db / 60).clamp(0, 1).toDouble())
  5.   .buffer(const Duration(milliseconds: 100))
  6.   .map((samples) {
  7.     // 生成平滑的波形数据
  8.     final windowSize = 30;
  9.     final padded = List<double>.filled(windowSize, 0) + samples;
  10.     final result = <double>[];
  12.     for (var i = 0; i < windowSize; i++) {
  13.       final windowStart = i;
  14.       final windowEnd = i + samples.length;
  15.       final window = padded.sublist(windowStart, windowEnd);
  16.       result.add(window.reduce((a, b) => a + b) / window.length);
  17.     }
  19.     return result;
  20.   });

五、完整页面集成

5.1 页面布局设计

  1. class VoiceMessagePage extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(title: const Text('语音消息')),
  6.       body: Column(
  7.         children: [
  8.           Expanded(
  9.             child: Center(
  10.               child: Container(
  11.                 width: 200,
  12.                 height: 200,
  13.                 decoration: BoxDecoration(
  14.                   border: Border.all(color: Colors.grey[300]!),
  15.                   borderRadius: BorderRadius.circular(10),
  16.                 ),
  17.                 child: const WaveForm(amplitudeStream: Stream.empty()),
  18.               ),
  19.             ),
  20.           ),
  21.           const Padding(
  22.             padding: EdgeInsets.all(20),
  23.             child: VoiceButton(),
  24.           ),
  25.           const SizedBox(height: 20),
  26.           Text('滑动可取消发送', style: TextStyle(color: Colors.grey)),
  27.         ],
  28.       ),
  29.     );
  30.   }
  31. }

5.2 状态同步处理

使用ValueNotifier实现按钮状态与页面UI的同步：

  1. class VoiceButtonController extends ValueNotifier<VoiceButtonStatus> {
  2.   VoiceButtonController() : super(VoiceButtonStatus.normal);
  4.   void startRecording() => value = VoiceButtonStatus.recording;
  5.   void cancelRecording() => value = VoiceButtonStatus.cancel;
  6.   void reset() => value = VoiceButtonStatus.normal;
  7. }
  9. // 在页面中使用
  10. final controller = VoiceButtonController();
  12. ValueListenableBuilder(
  13.   valueListenable: controller,
  14.   builder: (context, status, child) {
  15.     return AnimatedContainer(
  16.       duration: const Duration(milliseconds: 300),
  17.       color: status == VoiceButtonStatus.cancel 
  18.         ? Colors.red 
  19.         : Colors.green,
  20.       // 其他UI元素...
  21.     );
  22.   },
  23. )

六、性能优化建议

  1. 录音内存管理：

    • 及时关闭不再使用的录音器
    • 使用isolate处理耗时的音频编码

  2. 动画性能优化：

    • 对CustomPaint使用RepaintBoundary
    • 限制波形数据点数（建议30-60个点）

  3. 状态管理优化：

    • 使用Provider或Riverpod管理全局状态
    • 避免在build方法中创建新对象

  4. 平台适配处理：

    • iOS需要配置NSMicrophoneUsageDescription
    • Android需要动态请求RECORD_AUDIO权限

七、扩展功能建议

  1. 语音转文字：集成阿里云/腾讯云语音识别API
  2. 变声效果：使用soundpool实现实时音频处理
  3. 多语言支持：根据系统语言切换提示文本
  4. 无障碍适配：为按钮添加语音提示功能

通过以上实现方案，开发者可以构建出与微信体验高度一致的语音发送功能。实际开发中建议将录音逻辑封装为独立模块，便于在不同页面复用。对于商业项目，还需考虑添加噪音抑制、回声消除等高级音频处理功能。

最新文章