Flutter 框架跨平台鸿蒙开发 - 录音工具应用开发教程

录音控制：开始、暂停、继续、停止完整流程波形动画：实时波形可视化播放功能：完整的播放控制进度条：可拖动的进度条文件管理：重命名、删除功能渐变设计：精美的UI设计：最新设计规范。

猛扇赵四那边好嘴.

12人浏览 · 2026-01-19 23:31:35

猛扇赵四那边好嘴. · 2026-01-19 23:31:35 发布

Flutter录音工具应用开发教程

项目简介

这是一款功能完整的录音工具应用，提供录音、播放、管理等功能。应用采用Material Design 3设计风格，支持录音暂停/继续、波形可视化、录音列表管理、收藏功能等，界面美观，操作简便。
运行效果图
在这里插入图片描述

核心特性

录音功能：支持开始、暂停、继续、停止录音
波形可视化：实时显示录音波形动画
录音管理：查看、播放、重命名、删除录音
播放控制：播放、暂停、快进、快退功能
进度条：可拖动的播放进度条
收藏功能：收藏重要录音，快速访问
文件信息：显示时长、大小、日期等详细信息
渐变设计：精美的渐变UI设计

技术栈

Flutter 3.x
Material Design 3
状态管理（setState）
Timer定时器
动画效果

项目架构

数据模型设计

Recording（录音模型）

class Recording {
  final int id;              // 录音ID
  String title;              // 录音标题
  final DateTime dateTime;   // 录音时间
  final Duration duration;   // 录音时长
  final String filePath;     // 文件路径
  final int fileSize;        // 文件大小
  bool isFavorite;           // 是否收藏
}

设计要点：

ID用于唯一标识
title可修改（重命名功能）
完整的时间和时长信息
文件路径和大小记录
收藏状态标记

录音状态

bool _isRecording = false;   // 是否正在录音
bool _isPaused = false;      // 是否已暂停
Duration _recordingDuration = Duration.zero;  // 录音时长

状态说明：

未录音：_isRecording = false
录音中：_isRecording = true, _isPaused = false
已暂停：_isRecording = true, _isPaused = true

核心功能实现

1. 录音控制

void _startRecording() {
  setState(() {
    _isRecording = true;
    _isPaused = false;
    _recordingDuration = Duration.zero;
  });
  
  _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
    setState(() {
      _recordingDuration = Duration(seconds: _recordingDuration.inSeconds + 1);
    });
  });
}

void _pauseRecording() {
  setState(() {
    _isPaused = true;
  });
  _timer?.cancel();
}

void _stopRecording() {
  _timer?.cancel();
  final newRecording = Recording(
    id: _recordings.length + 1,
    title: '录音 ${_recordings.length + 1}',
    dateTime: DateTime.now(),
    duration: _recordingDuration,
    filePath: '/recordings/recording_${_recordings.length + 1}.m4a',
    fileSize: Random().nextInt(5000000) + 500000,
  );
  
  setState(() {
    _recordings.insert(0, newRecording);
    _isRecording = false;
  });
}

2. 波形可视化

Widget _buildWaveform() {
  return SizedBox(
    height: 100,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(30, (index) {
        final height = _isRecording && !_isPaused
            ? (Random().nextDouble() * 0.7 + 0.3) * 100
            : 20.0;
        return Container(
          width: 4,
          height: height,
          margin: EdgeInsets.symmetric(horizontal: 2),
          decoration: BoxDecoration(
            color: Colors.white.withValues(alpha: 0.8),
            borderRadius: BorderRadius.circular(2),
          ),
        );
      }),
    ),
  );
}

3. 播放控制

void _togglePlayPause() {
  if (_isPlaying) {
    _pause();
  } else {
    _play();
  }
}

void _play() {
  setState(() {
    _isPlaying = true;
  });
  
  _playTimer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
    setState(() {
      _currentPosition = Duration(milliseconds: _currentPosition.inMilliseconds + 100);
      if (_currentPosition >= widget.recording.duration) {
        _stop();
      }
    });
  });
}