Flutter problems playing video with Chewie and Video Player

Question

I am new to the world of Flutter, I am creating a video player with the following libraries: -Video_Player -chewie The problem is that I follow the instructions in the documentation and also in several videos on YouTube, only that the video plays in the background (audio is heard), but the video does not appear. For more information about my problem, I attach my code, I thank you in advance for all the help provided.

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%C3%AD+%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")
                      ],
                    ),
                  ),
          ))
        ],
      ),
    );
  }
}

I also provide the official page

https://pub.dev/packages/chewie

Answer 1

After initializing controller and video you need to update screen state. Try this in Init Code:

@override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
                                        await loadVideoPlayer();
                                        setState(() {});
                                      });
  }