Voice Note Recorder & Player #

A comprehensive and modern Flutter package for recording and playing voice notes. It provides a beautiful, customizable UI out of the box, making it easy to integrate voice messaging features into your app.

📖 Table of Contents #

• Features
• Screenshots
• Installation
• Usage
  • Voice Recorder
  • Audio Player
  • Full Example
• Customization
• About the Developer
• License

✨ Features #

• 🎙️ Modern Voice Recorder: A sleek bottom sheet UI for recording with animations and timer.
• 🎵 Built-in Audio Player: Includes a complete player with seeking, playback speed control (0.5x, 1x, 1.5x, 2x), and duration display.
• 🎨 Fully Customizable: Change colors, strings, and styles to match your app's theme.
• 💾 File Handling: Automatically manages temporary files and callback paths.
• 🔐 Permissions: Handles microphone permissions gracefully.
• 🚀 Easy Integration: Plug and play with minimal setup.

📸 Screenshots #

Main View	Recording	Player

Save/Cancel	Delete

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  voice_note_recorder_player: ^0.0.1

(If you are developing locally, point to your local path):

dependencies:
  voice_note_recorder_player:
    path: packages/voice_note_recorder_player

Run flutter pub get to install.

Android Setup #

Add the following permissions to your AndroidManifest.xml:

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

iOS Setup #

Add the following key to your Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>We need access to the microphone to record voice notes.</string>

🚀 Usage #

Voice Recorder #

Use VoiceRecorderBottomSheet to show the recording interface.

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) => VoiceRecorderBottomSheet(
    onRecorded: (path) {
      print("Audio recorded at: $path");
      // Handle the recorded file path
    },
  ),
);

Audio Player #

Use AudioPlayerWidget to play a local audio file.

AudioPlayerWidget(
  path: filePath,
  primaryColor: Colors.deepPurple, // Optional customization
)

Full Example #

Here is how you can implement a complete flow with the VoiceNoteRecorderPlayer wrapper widget:

VoiceNoteRecorderPlayer(
  tempVoiceNotePath: _tempPath,
  savedVoiceNotePath: _savedPath,
  isLoading: _isLoading,
  isLocked: false,
  onOpenRecorder: () {
    // Open recorder logic
  },
  onSaveTemp: () {
    // Save logic
  },
  onCancelTemp: () {
    // Cancel logic
  },
  onDeleteSaved: () {
    // Delete logic
  },
)

🎨 Customization #

You can fully customize the strings and colors.

VoiceNoteRecorderPlayer(
  // ...
  primaryColor: Colors.orange,
  successColor: Colors.green,
  errorColor: Colors.red,
  strings: VoiceNoteStrings(
    voiceNote: "Message Vocal",
    recordVoiceNote: "Enregistrer",
    recording: "Enregistrement en cours...",
  ),
)

🛠️ Dependencies Used #

This package relies on the following powerful packages:

• audioplayers
• record
• provider
• path_provider

🧑‍💻 About the Developer #

Hello! 👋 I'm Radhi MIGHRI, a passionate Software Engineer specializing in mobile application development with Flutter and native iOS. I am dedicated to building high-quality, user-friendly, and scalable applications.

I created this package to help developers easily integrate voice recording and playback features into their Flutter apps with a modern and customizable UI.

Connect with me:

• 🌐 Portfolio: radhi-mighri-portfolio.web.app
• 💼 LinkedIn: Radhi MIGHRI
• 🐙 GitHub: Radhi MIGHRI

If you find this package useful, please give it a like 👍 on pub.flutter-io.cn and star ⭐️ on GitHub!

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.