How to Increase/Decrease Volume in Flutter

In this example, we are going to show you how to increase or decrease volume, get current system volume, and listen to volume change in Flutter App. See the example below for details.

First, add the perfect_volumne_control package in your Flutter Package by adding the following lines in pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  perfect_volume_control: ^1.0.5

We choose this package because, it is supported by both Android and iOS, and it has a Volume change listener as well.

Import package in your Dart script:

import 'package:perfect_volume_control/perfect_volume_control.dart';

PerfectVolumeControl.getVolume()

You can also use PerfectVolumeControl.volume; to get the current volume in Flutter. It will return double value ranging from 0-1.

PerfectVolumeControl.setVolume(0.5);

You have to pass double values ranging from 0 to 1. for example, 0 is the lowest volume value and 1 is the highest volume value, and 0.5 is half volume.

PerfectVolumeControl.stream.listen((volume) {               
     // code on volume change
});

You can listen to both volume increase or decrease from a hardware button press on the device.

Read This Also: How to Listen to Volume Up/Down Button Press in Flutter

import 'package:flutter/material.dart';
import 'package:perfect_volume_control/perfect_volume_control.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  double currentvol = 0.5;

  @override
  void initState() {
    PerfectVolumeControl.hideUI = false; //set if system UI is hided or not on volume up/down
    Future.delayed(Duration.zero,() async {
        currentvol = await PerfectVolumeControl.getVolume();
        setState(() {
            //refresh UI
        });
    });

    PerfectVolumeControl.stream.listen((volume) {               
       setState(() {
         currentvol = volume;
       });
    });
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Increase/Decrease Volume in Flutter"),
            backgroundColor: Colors.redAccent,
         ),

         body: Container(
                margin: EdgeInsets.only(top:100),
                padding: EdgeInsets.all(20),
                child: Column( 
                  children: [
                     
                     Text("Current Volumen: $currentvol"),

                     Divider(),

                     Slider(
                       value: currentvol, 
                       onChanged: (newvol){
                           currentvol = newvol;
                           PerfectVolumeControl.setVolume(newvol); //set new volume
                           setState(() {
                             
                           });
                       },
                       min: 0, // 
                       max:  1,
                       divisions: 100,
                     )
                  ],
                ) 
            )   
          
    );
  } 
}

In this code, we have made a simple app where we have used Slider() widget to change the volume of the device.