fft_recorder_ui #

A beginner-friendly audio recorder + FFT bar visualizer package.
Built on top of flutter_recorder and renders bars with container heights without CustomPainter.

1. What you can do #

• Start / pause / resume / stop recording
• Save to file
• Real-time FFT streaming
• Bar visualizer widget

2. Install #

dependencies:
  fft_recorder_ui:
    path: ../packages/fft_recorder_ui

3. Permissions (mobile) #

• Android: RECORD_AUDIO
• iOS: NSMicrophoneUsageDescription

Already added in the example app.

4. Basic flow #

1. Create controller
2. Request permission
3. Start recording (auto-starts streaming)
4. Bind FFT data to BarVisualizer
5. Stop recording (streaming stops too)

5. Quick example #

final controller = FftRecorderController();
await controller.requestMicPermission();

// Start recording (auto-starts streaming)
await controller.startRecording(filePath: '/path/to/file.wav');

// Pause / resume / stop
controller.pauseRecording();
controller.resumeRecording();
final savedPath = controller.stopRecording();

// FFT bar visualization
// data: FFT list (0.0 ~ 1.0)
// barCount: number of bars
// barColor: bar color
// barWidth: bar width
// maxHeight: max bar height
// spacing: space between bars
// emptyText: text when data is empty
BarVisualizer(
  data: controller.fftData.value,
  barCount: 64,
  barColor: Colors.white,
  barWidth: 4,
  maxHeight: 60,
  spacing: 6,
  emptyText: 'Waiting for FFT data',
);

6. Controller API #

State / data (ValueNotifier) #

• recordingStatus: idle, recording, paused
• isStreaming: whether streaming is active
• fftData: FFT list (0.0 ~ 1.0)
• volumeDb: current volume in dB

Methods #

• requestMicPermission(): request mic permission (mobile)
• init(): recorder initialization
• startRecording({filePath}): start recording + auto-start streaming
• pauseRecording(): pause recording + stop streaming
• resumeRecording(): resume recording + restart streaming
• stopRecording(): stop recording + stop streaming, returns saved path
• startStreaming(): manually start FFT streaming
• stopStreaming(): manually stop streaming (ignored while recording)

Stream #

• fftStream: real-time FFT list stream (use listener + setState)

7. Real-time update (simple way) #

controller.fftStream.listen((data) {
  setState(() {
    _fftData = data;
  });
});

Notes #

• FFT visualization works with PCMFormat.f32le.
• File saving requires a valid file path.
• On web, the browser manages file paths.