Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
flutter:
sdk: flutter
easy_audio_trimmer: ^1.0.2+4
file_picker: ^6.1.1

Step 2: Import

import 'package:easy_audio_trimmer/easy_audio_trimmer.dart';
import 'package:file_picker/file_picker.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: While running on the Android platform if it gives an error that minSdkVersion needs to be 24, or on the iOS platform that the Podfile platform version should be 11

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In this dart file, we will create a new class AudioTrimmerDemo(). In this class, will add an ElevatedButton(). In this button, we will add the text “Select File” to its child function, and on the onPressed function, we will add the pick-up audio file function.

Center(
child: ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.teal.shade50),
onPressed: () async {
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.audio,
allowCompression: false,
);
if (result != null) {
File file = File(result.files.single.path!);
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return AudioTrimmerViewDemo(file);
}),
);
}
},
child: const Text(
"Select File",
style: TextStyle(color: Colors.teal),
)),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

In the same dart file, we will create another new class AudioTrimmerViewDemo().

In this class, we will create a final Trimmer variable which is _trimmer is equal to Trimmer(). We will create two double variables _startValue and _endValue equal to 0.0. Also, we will create a three-bool variable was _isPlaying, _progressVisibility, and isLoading equal to false.

final Trimmer _trimmer = Trimmer();
double _startValue = 0.0;
double _endValue = 0.0;
bool _isPlaying = false;
bool _progressVisibility = false;
bool isLoading = false;

We will create an initState() method. In this method, we will add a _loadAudio() method. In this method, we will load the trimmer audio files.

@override
void initState() {
super.initState();
_loadAudio();
}
void _loadAudio() async {
setState(() {
isLoading = true;
});
await _trimmer.loadAudio(audioFile: widget.file);
setState(() {
isLoading = false;
});
}

We will create a _saveAudio method. In this method, we will save trimmed audio files.

_saveAudio() {
setState(() {
_progressVisibility = true;
});
_trimmer.saveTrimmedAudio(
startValue: _startValue,
endValue: _endValue,
audioFileName: DateTime.now().millisecondsSinceEpoch.toString(),
onSave: (outputPath) {
setState(() {
_progressVisibility = false;
});
debugPrint('OUTPUT PATH: $outputPath');
},
);
}

In the body part, we will create an audio trimmer view using the TrimViewer() method. In this method, we will set backgroundColor, barColor, viewerHeight, onChangeStart, etc.

Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TrimViewer(
trimmer: _trimmer,
viewerHeight: 100,
viewerWidth: MediaQuery.of(context).size.width,
durationStyle: DurationStyle.FORMAT_MM_SS,
backgroundColor:Colors.teal,
barColor: Colors.white,
durationTextStyle: const TextStyle(
color: Colors.teal),
allowAudioSelection: true,
editorProperties: const TrimEditorProperties(
circleSize: 10,
borderPaintColor: Colors.red,
borderWidth: 4,
borderRadius: 5,
circlePaintColor: Colors.redAccent,
),
areaProperties:
TrimAreaProperties.edgeBlur(blurEdges:true),
onChangeStart: (value) => _startValue = value,
onChangeEnd: (value) => _endValue = value,
onChangePlaybackState: (value) {
if (mounted) {
setState(() => _isPlaying = value);
}
},
),
),
),

Also, we will add the TextButton() method. In this method, we will add play and pause button functions.

TextButton(
child: _isPlaying
? const Icon(
Icons.pause,
size: 80.0,
color: Colors.teal,
)
: const Icon(
Icons.play_arrow,
size: 80.0,
color: Colors.teal,
),
onPressed: () async {
bool playbackState =
await _trimmer.audioPlaybackControl(
startValue: _startValue,
endValue: _endValue,
);
setState(() => _isPlaying = playbackState);
},
),

Also, we will add the Visibility() method. In this method, we will add LinearProgressIndicator(). This method will work on the save button only. When the user presses save the audio then the LinearProgressIndicator will be shown.

Visibility(
visible: _progressVisibility,
child: LinearProgressIndicator(
backgroundColor:
Theme.of(context).primaryColor.withOpacity(0.5),
),
),
ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.teal.shade50),
onPressed:
_progressVisibility ? null : () =>_saveAudio(),
child: const Text("SAVE",style: TextStyle(color: Colors.teal)),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.