Flutter中使用Chewie与Video Player播放视频仅出声音无画面求助

问题描述 #

我是Flutter新手，正在使用video_player和chewie库开发视频播放器。按照文档及YouTube教程操作后，视频仅能在后台播放（可听到音频），但画面无法显示。以下是我的实现代码，同时参考了chewie官方页面：

import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.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(
      title: 'Euforia',
      home: MyHomePage(),
    );
  }
}

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

  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VideoPlayerController controller;
  ChewieController? chewieController;

  Future<void> loadVideoPlayer() async {
    controller = VideoPlayerController.network(
        "https://download1486.mediafire.com/xtpol73k5d0g/6udcu6b0onjnuv5/Santa+RM+-+Mucho+Para+Mí+%28Ft.+Franco+Escamilla%29+%5BVideo+Oficial%5D_2.mp4");
    await Future.wait([controller.initialize()]);
    chewieController = ChewieController(
        videoPlayerController: controller, autoPlay: true, looping: false);
  }

  @override
  void initState() {
    super.initState();
    loadVideoPlayer();
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
    chewieController!.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hola Mundo')),
      body: Column(
        children: [
          Expanded(
              child: Center(
            child: chewieController != null &&
                    chewieController!.videoPlayerController.value.isInitialized
                ? Chewie(controller: chewieController!)
                : Center(
                    child: Column(
                      children: const [
                        CircularProgressIndicator(),
                        SizedBox(
                          height: 60.0,
                        ),
                        Text("Cargando")
                      ],
                    ),
                  ),
          ))
        ],
      ),
    );
  }
}

解决方案 #

核心问题是异步初始化完成后未触发UI更新，同时存在空安全隐患，以下是修改要点：

• 添加状态刷新：在loadVideoPlayer方法末尾调用setState，通知UI重新构建以显示视频画面。
• 优化空安全处理：dispose时先判断chewieController非空，避免空指针异常。
• 简化初始化流程：直接等待controller.initialize()完成，无需用Future.wait包裹单个任务。

修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.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(
      title: 'Euforia',
      home: MyHomePage(),
    );
  }
}

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

  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VideoPlayerController controller;
  ChewieController? chewieController;

  Future<void> loadVideoPlayer() async {
    controller = VideoPlayerController.network(
        "https://download1486.mediafire.com/xtpol73k5d0g/6udcu6b0onjnuv5/Santa+RM+-+Mucho+Para+Mí+%28Ft.+Franco+Escamilla%29+%5BVideo+Oficial%5D_2.mp4");
    await controller.initialize();
    chewieController = ChewieController(
      videoPlayerController: controller,
      autoPlay: true,
      looping: false,
    );
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    loadVideoPlayer();
  }

  @override
  void dispose() {
    controller.dispose();
    chewieController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hola Mundo')),
      body: Column(
        children: [
          Expanded(
            child: chewieController != null &&
                    chewieController!.videoPlayerController.value.isInitialized
                ? Chewie(controller: chewieController!)
                : const Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        CircularProgressIndicator(),
                        SizedBox(height: 60.0),
                        Text("Cargando")
                      ],
                    ),
                  ),
          )
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Beto Mendez Leite