Flutter音量控制插件flutter_volume_controller的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter Volume Controller

Flutter Volume Controller 是一个用于控制不同平台上系统音量和监听音量变化的插件。

特性

  • 控制系统和媒体音量。
  • 监听音量变化。

平台支持

  • ✅ Android
  • ✅ iOS
  • ✅ macOS
  • ✅ Windows
  • ✅ Linux

示例代码

下面是一个完整的示例,展示了如何使用 flutter_volume_controller 插件来控制音量,并在用户界面中提供相应的交互选项。

import 'dart:io';

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  AudioStream _audioStream = AudioStream.music;
  AudioSessionCategory? _audioSessionCategory;
  double _currentVolume = 0.0;
  bool _showSystemUI = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      if (Platform.isIOS) {
        await _loadIOSAudioSessionCategory();
      }
      if (Platform.isAndroid) {
        await _loadAndroidAudioStream();
      }
    });
    FlutterVolumeController.addListener((volume) {
      setState(() {
        _currentVolume = volume;
      });
    });
  }

  @override
  void dispose() {
    FlutterVolumeController.removeListener();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Volume Controller Example'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          if (Platform.isAndroid || Platform.isIOS)
            Center(
              child: ElevatedButton(
                child: const Text('Show or hide system ui'),
                onPressed: () async {
                  await FlutterVolumeController.updateShowSystemUI(
                      !FlutterVolumeController.showSystemUI);
                  setState(() {
                    _showSystemUI = FlutterVolumeController.showSystemUI;
                  });
                },
              ),
            ),
          if (Platform.isAndroid) ...[
            Center(
              child: ElevatedButton(
                child: const Text('Switch audio stream'),
                onPressed: () async {
                  final stream = await _pickAndroidAudioStream(context);
                  if (stream != null) {
                    setState(() {
                      _audioStream = stream;
                    });
                    await FlutterVolumeController.setAndroidAudioStream(
                      stream: stream,
                    );
                  }
                },
              ),
            ),
            Center(
              child: ElevatedButton(
                child: const Text('Get audio stream'),
                onPressed: () async {
                  final stream =
                      await FlutterVolumeController.getAndroidAudioStream();
                  _showSnackBar('Audio stream: $stream');
                },
              ),
            ),
          ],
          if (Platform.isIOS) ...[
            Center(
              child: ElevatedButton(
                child: const Text('Switch audio session category'),
                onPressed: () async {
                  final category = await _pickIOSAudioSessionCategory(context);
                  if (category != null) {
                    setState(() {
                      _audioSessionCategory = category;
                    });
                    await FlutterVolumeController.setIOSAudioSessionCategory(
                      category: category,
                    );
                  }
                },
              ),
            ),
            Center(
              child: ElevatedButton(
                child: const Text('Get audio session category'),
                onPressed: () async {
                  final category = await FlutterVolumeController
                      .getIOSAudioSessionCategory();
                  _showSnackBar('Audio session category: $category');
                },
              ),
            ),
          ],
          Center(
            child: ElevatedButton(
              child: const Text('Get Volume'),
              onPressed: () async {
                final volume = await FlutterVolumeController.getVolume(
                  stream: _audioStream,
                );
                _showSnackBar('Current Volume: $volume');
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Set Volume to 50%'),
              onPressed: () {
                FlutterVolumeController.setVolume(
                  0.5,
                  stream: _audioStream,
                );
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Raise Volume'),
              onPressed: () {
                FlutterVolumeController.raiseVolume(
                  0.2,
                  stream: _audioStream,
                );
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Lower Volume'),
              onPressed: () {
                FlutterVolumeController.lowerVolume(
                  0.2,
                  stream: _audioStream,
                );
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Get mute'),
              onPressed: () async {
                final isMuted = await FlutterVolumeController.getMute();
                _showSnackBar('Muted: $isMuted');
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Set mute'),
              onPressed: () {
                FlutterVolumeController.setMute(
                  true,
                  stream: _audioStream,
                );
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Set unmute'),
              onPressed: () {
                FlutterVolumeController.setMute(
                  false,
                  stream: _audioStream,
                );
              },
            ),
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Toggle mute'),
              onPressed: () {
                FlutterVolumeController.toggleMute(stream: _audioStream);
              },
            ),
          ),
          const SizedBox(height: 20),
          Text(
            'Current Volume: $_currentVolume',
            textAlign: TextAlign.center,
          ),
          if (Platform.isAndroid)
            Text(
              'Audio Stream: $_audioStream',
              textAlign: TextAlign.center,
            ),
          if (Platform.isIOS)
            Text(
              'Audio Session Category: $_audioSessionCategory',
              textAlign: TextAlign.center,
            ),
          if (Platform.isAndroid || Platform.isIOS)
            Text(
              'Show System UI: $_showSystemUI',
              textAlign: TextAlign.center,
            ),
        ],
      ),
    );
  }

  Future<AudioStream?> _pickAndroidAudioStream(BuildContext context) async {
    return await showModalBottomSheet(
      context: context,
      builder: (context) {
        return ListView.builder(
          shrinkWrap: true,
          itemCount: AudioStream.values.length,
          itemBuilder: (_, index) {
            return ListTile(
              title: Text(AudioStream.values[index].name),
              onTap: () {
                Navigator.of(context).maybePop(AudioStream.values[index]);
              },
            );
          },
        );
      },
    );
  }

  Future<AudioSessionCategory?> _pickIOSAudioSessionCategory(
    BuildContext context,
  ) async {
    return await showModalBottomSheet(
      context: context,
      builder: (context) {
        return ListView.builder(
          shrinkWrap: true,
          itemCount: AudioSessionCategory.values.length,
          itemBuilder: (_, index) {
            return ListTile(
              title: Text(AudioSessionCategory.values[index].name),
              onTap: () {
                Navigator.of(context).maybePop(
                  AudioSessionCategory.values[index],
                );
              },
            );
          },
        );
      },
    );
  }

  void _showSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: const Duration(seconds: 2),
      ),
    );
  }

  Future<void> _loadIOSAudioSessionCategory() async {
    final category = await FlutterVolumeController.getIOSAudioSessionCategory();
    if (category != null) {
      setState(() {
        _audioSessionCategory = category;
      });
    }
  }

  Future<void> _loadAndroidAudioStream() async {
    final audioStream = await FlutterVolumeController.getAndroidAudioStream();
    if (audioStream != null) {
      setState(() {
        _audioStream = _audioStream;
      });
    }
  }
}

使用说明

  1. 初始化

    • initState 方法中添加了一个回调函数,在页面首次绘制完成后执行。根据平台加载相应的音频流或会话类别,并添加音量变化监听器。
  2. 按钮功能

    • 显示或隐藏系统UI:切换是否显示系统音量调节滑块。
    • 切换音频流(仅限Android):选择不同的音频流类型。
    • 获取当前音频流(仅限Android):显示当前设置的音频流。
    • 切换音频会话类别(仅限iOS):选择不同的音频会话类别。
    • 获取当前音频会话类别(仅限iOS):显示当前设置的音频会话类别。
    • 获取音量:显示当前音量值。
    • 设置音量到50%:将音量设置为50%。
    • 增加音量:增加音量0.2单位。
    • 降低音量:降低音量0.2单位。
    • 检查静音状态:显示当前是否处于静音状态。
    • 设置静音:将音量设为零并标记为静音。
    • 取消静音:恢复音量并取消静音标记。
    • 切换静音状态:在静音和非静音之间切换。
  3. 状态更新

    • 每次操作后,通过 setState 更新界面上的状态信息,如当前音量、音频流、会话类别等。
  4. 清理工作

    • dispose 方法中移除音量变化监听器,避免内存泄漏。

这个示例涵盖了 flutter_volume_controller 插件的主要功能,并提供了直观的用户界面来进行各种音量控制操作。希望这能帮助您更好地理解和使用该插件!


更多关于Flutter音量控制插件flutter_volume_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter音量控制插件flutter_volume_controller的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用flutter_volume_controller插件来控制音量的代码示例。这个插件允许你控制媒体和系统音量。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_volume_controller依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_volume_controller: ^3.0.0 # 请检查最新版本号

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Dart文件中导入flutter_volume_controller包:

import 'package:flutter_volume_controller/flutter_volume_controller.dart';

3. 使用插件

以下是一个简单的示例,展示如何使用这个插件来控制媒体音量:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Volume Controller Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VolumeControlScreen(),
    );
  }
}

class VolumeControlScreen extends StatefulWidget {
  @override
  _VolumeControlScreenState createState() => _VolumeControlScreenState();
}

class _VolumeControlScreenState extends State<VolumeControlScreen> {
  double _mediaVolume = 0.0;

  @override
  void initState() {
    super.initState();
    // 初始化音量控制器
    _initVolumeController();
  }

  Future<void> _initVolumeController() async {
    // 获取当前媒体音量
    final volumeController = FlutterVolumeController();
    final currentVolume = await volumeController.getMediaVolume();
    setState(() {
      _mediaVolume = currentVolume;
    });
  }

  Future<void> _setMediaVolume(double volume) async {
    final volumeController = FlutterVolumeController();
    await volumeController.setMediaVolume(volume);
    setState(() {
      _mediaVolume = volume;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Volume Control Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Media Volume: ${_mediaVolume * 100}%',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Slider(
              value: _mediaVolume,
              min: 0.0,
              max: 1.0,
              onChanged: (newValue) async {
                await _setMediaVolume(newValue);
              },
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. 依赖添加:在pubspec.yaml文件中添加flutter_volume_controller依赖。
  2. 导入包:在Dart文件中导入flutter_volume_controller包。
  3. 初始化音量控制器:在initState方法中,调用_initVolumeController方法来获取当前的媒体音量并设置初始状态。
  4. 设置音量:定义_setMediaVolume方法来设置新的媒体音量。
  5. UI构建:使用Slider组件来允许用户通过滑动条来调整音量,并在界面上显示当前的音量值。

这个示例展示了如何使用flutter_volume_controller插件来获取和设置媒体音量。如果你需要控制系统音量,可以使用getSystemVolumesetSystemVolume方法,这些方法的用法与媒体音量类似。

希望这能帮助你理解如何在Flutter项目中使用flutter_volume_controller插件!

回到顶部