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 GeeksForGeeks'),
      ),
      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(() {});
              })
        ],
      ),
    );
  }
}

Output: