Flutter – Set Device Volume with Slider
A slider is a widget to select a value from a given range in the application. We can slide through the value and select the desired value from it. We don’t need to install any dependency to implement a slider. In this article, we will learn how to control the volume of the device from our Flutter app with Slider. We will learn how to get the current volume, set the volume, mute the device, set its value to the max and change the value in the app when the user changes the volume manually from the volume button. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
We will simply create an app that will cover almost all the control for volume. There is a different function for each I will explain that by covering all the things in 1 screen
Step 1: Create Flutter or Use Existing App
Create a flutter app with this command
Dart
flutter create . |
Step 2: Add the following package
Add the following package to your project
Dart
dependencies: flutter_volume_controller: ^1.3.1 |
Step 3: Let’s get the current volume of device
Dart
FlutterVolumeController.getVolume() .then((volume) => _volumeListenerValue = volume ?? 0.0); |
This will get the volume value of device and we will show that in next steps. Volume value will be between 0 and 1.
Step 4: Now will add listener to update the volume values
When user change from volume button or from app. We will add this listener in init state of our stateful widgets.
Dart
// Listen to system volume change FlutterVolumeController.addListener((volume) { setState(() => // set is value in listener value _volumeListenerValue = volume); }); |
Step 5: Now we will set volume from Slider
We will increase/decrease the volume from slider which will automatically update device volume
Dart
// Set Volume from slider in app Row( children: [ const Text( 'Set Volume:' ), Flexible( child: Slider( min: 0, max: 1, onChanged: ( double value) { _volumeListenerValue = value; FlutterVolumeController.setVolume(_volumeListenerValue); setState(() {}); }, value: _volumeListenerValue, ), ), ], ), |
Step 6: Now we will mute the device from button
We will now mute the device from a button click by caaling a simple function
Dart
// Mute the volume of device ElevatedButton( onPressed: () => FlutterVolumeController.getMute(), child: const Text( 'Mute Volume' ), ), |
Step 7: We will set the volume to maximum from button
We will set the volume as 1 i.e maximum for our. device
Dart
// Set the volume as its maximum ElevatedButton( onPressed: () => FlutterVolumeController.raiseVolume(1), child: const Text( 'Max Volume' ), ), |
Step 8: Now will set whether to show the system UI for volume
If we enable it then when we change any value related to volume the volume UI will be visible and if disable it,that will not shown
Dart
// This is to select whether we have to show System UI or not SwitchListTile.adaptive( title: const Text( 'Show system UI' ), value: FlutterVolumeController.showSystemUI, onChanged: (val) async { // Change the state of volume controller await FlutterVolumeController.updateShowSystemUI(val); setState(() {}); }) |
From this steps we have completely understood approax all the things related to volume controller.
Complete Source Code
Dart
import 'package:flutter/material.dart' ; import 'package:flutter_volume_controller/flutter_volume_controller.dart' ; class VolumeControllerScreen extends StatefulWidget { const VolumeControllerScreen({super.key}); @override _VolumeControllerScreenState createState() => _VolumeControllerScreenState(); } class _VolumeControllerScreenState extends State<VolumeControllerScreen> { // set volume value of device double setVolumeValue = 0; @override void initState() { super.initState(); // To get current device volume FlutterVolumeController.getVolume() .then((volume) => setVolumeValue = volume ?? 0.0); // Listen to system volume change FlutterVolumeController.addListener((volume) { setState(() => // set is value in listener value setVolumeValue = volume); }); } // Dispose the listener we have created @override void dispose() { FlutterVolumeController.removeListener(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( 'Volume Controller w3wiki' ), ), body: Column( children: [ // To check current volume with 2 values after decimal Text( 'Current volume: ${ setVolumeValue.toStringAsFixed(2)}' ), // Set Volume from slider in app Row( children: [ const Text( 'Set Volume:' ), Flexible( child: Slider( min: 0, max: 1, onChanged: ( double value) { setVolumeValue = value; FlutterVolumeController.setVolume( setVolumeValue); setState(() {}); }, value: setVolumeValue, ), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ // Mute the volume of device ElevatedButton( onPressed: () => FlutterVolumeController.getMute(), child: const Text( 'Mute Volume' ), ), const SizedBox( width: 10, ), // Set the volume as its maximum ElevatedButton( onPressed: () => FlutterVolumeController.raiseVolume(1), child: const Text( 'Max Volume' ), ), ], ), // This is to select whether we have to show System UI or not SwitchListTile.adaptive( title: const Text( 'Show system UI' ), value: FlutterVolumeController.showSystemUI, onChanged: (val) async { // Change the state of volume controller await FlutterVolumeController.updateShowSystemUI(val); setState(() {}); }) ], ), ); } } |
Contact Us