← 返回首页

🎵 媒体组件详解

Flutter 提供了丰富的媒体处理功能，包括视频播放、音频播放、相机访问、图片选择等。这些功能通常需要使用第三方包。

🎬 VideoPlayer

VideoPlayer 用于播放视频文件，需要使用 video_player 包。

渲染预览

▶️
视频播放器
▶️
1:24 / 4:05
🔊
⛶

使用 video_player 包

// 1. 添加依赖
// dependencies:
//   video_player: ^2.8.0

// 2. 使用示例
import 'package:video_player/video_player.dart';

class VideoPlayerExample extends StatefulWidget {
  @override
  _VideoPlayerExampleState createState() => _VideoPlayerExampleState();
}

class _VideoPlayerExampleState extends State {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/video.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('视频播放器')),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

常用方法

  • play()：播放视频
  • pause()：暂停视频
  • seekTo()：跳转到指定位置
  • setVolume()：设置音量
  • setPlaybackSpeed()：设置播放速度
💡 提示：记得在 dispose() 中释放 VideoPlayerController。

🎵 AudioPlayer

AudioPlayer 用于播放音频文件，需要使用 audioplayers 包。

渲染预览

🎵
示例音乐
艺术家名称
1:45 3:52
⏮️
⏸️
⏭️

使用 audioplayers 包

// 1. 添加依赖
// dependencies:
//   audioplayers: ^5.2.0

// 2. 使用示例
import 'package:audioplayers/audioplayers.dart';

class AudioPlayerExample extends StatefulWidget {
  @override
  _AudioPlayerExampleState createState() => _AudioPlayerExampleState();
}

class _AudioPlayerExampleState extends State {
  final AudioPlayer _audioPlayer = AudioPlayer();
  bool _isPlaying = false;
  Duration _duration = Duration.zero;
  Duration _position = Duration.zero;

  @override
  void initState() {
    super.initState();
    _audioPlayer.onDurationChanged.listen((duration) {
      setState(() {
        _duration = duration;
      });
    });

    _audioPlayer.onPositionChanged.listen((position) {
      setState(() {
        _position = position;
      });
    });

    _audioPlayer.onPlayerStateChanged.listen((state) {
      setState(() {
        _isPlaying = state == PlayerState.playing;
      });
    });
  }

  Future _playAudio() async {
    await _audioPlayer.play(AssetSource('audio/music.mp3'));
  }

  @override
  void dispose() {
    _audioPlayer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('音频播放器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('位置: ${_position.inSeconds}/${_duration.inSeconds}秒'),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(_isPlaying ? Icons.pause : Icons.play_arrow),
                  onPressed: _isPlaying
                      ? () => _audioPlayer.pause()
                      : _playAudio,
                ),
                IconButton(
                  icon: Icon(Icons.stop),
                  onPressed: () => _audioPlayer.stop(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

常用方法

  • play()：播放音频
  • pause()：暂停音频
  • stop()：停止音频
  • seek()：跳转到指定位置
  • setVolume()：设置音量
💡 提示：audioplayers 支持多种音频格式，包括 mp3、wav、ogg 等。

📷 Camera

Camera 用于访问设备相机，需要使用 camera 包。

渲染预览

📷
相机预览
⚡
后置摄像头
⚙️
🖼️
🔄

使用 camera 包

// 1. 添加依赖
// dependencies:
//   camera: ^0.10.5

// 2. 使用示例
import 'package:camera/camera.dart';

class CameraExample extends StatefulWidget {
  @override
  _CameraExampleState createState() => _CameraExampleState();
}

class _CameraExampleState extends State {
  late CameraController _controller;
  late List _cameras;
  bool _isInitialized = false;

  @override
  void initState() async {
    super.initState();
    _cameras = await availableCameras();
    _controller = CameraController(
      _cameras[0],
      ResolutionPreset.high,
    );
    await _controller.initialize();
    setState(() {
      _isInitialized = true;
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Future _takePicture() async {
    if (!_controller.value.isInitialized) return;
    final image = await _controller.takePicture();
    print('照片路径: ${image.path}');
  }

  @override
  Widget build(BuildContext context) {
    if (!_isInitialized) {
      return Center(child: CircularProgressIndicator());
    }
    return Scaffold(
      appBar: AppBar(title: Text('相机')),
      body: CameraPreview(_controller),
      floatingActionButton: FloatingActionButton(
        onPressed: _takePicture,
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}
💡 提示：使用相机需要在 Android 和 iOS 上配置相应的权限。

📷 ImagePicker

ImagePicker 用于从图库或相机选择图片，需要使用 image_picker 包。

渲染预览

选择图片
📷
点击选择图片
🖼️ 从图库选择
📸 拍照
已选择的图片：

使用 image_picker 包

// 1. 添加依赖
// dependencies:
//   image_picker: ^1.0.0

// 2. 使用示例
import 'package:image_picker/image_picker.dart';

class ImagePickerExample extends StatefulWidget {
  @override
  _ImagePickerExampleState createState() => _ImagePickerExampleState();
}

class _ImagePickerExampleState extends State {
  final ImagePicker _picker = ImagePicker();
  XFile? _image;

  Future _pickImageFromGallery() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  Future _pickImageFromCamera() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.camera);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('图片选择器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _image != null
                ? Image.file(File(_image!.path))
                : Text('未选择图片'),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _pickImageFromGallery,
                  child: Text('从图库选择'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _pickImageFromCamera,
                  child: Text('拍照'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

常用方法

  • pickImage()：选择单张图片
  • pickMultiImage()：选择多张图片
  • pickVideo()：选择视频
💡 提示：使用 ImagePicker 需要在 Android 和 iOS 上配置相应的权限。
← 返回首页