Cómo Mostrar Un Video en Flutter en Android

3 minuto(s)

En esta página:

En ocasiones necesitamos mostrar un video en nuestra aplicación creada con Flutter en el IDE Android Studio.

Hacer esto es fácil, solo debes seguir ciertos pasos que te compartiré a continuación.

En este tutorial te enseñaré a Cómo Mostrar Un Video en Flutter en Android, vamos con ello.

Reproduciendo un video en una aplicación creada con Flutter en Android Studio — El formato de video más popular y recomendado es el formato MP4

Mostrando el Video en Android

Supongamos que ya tienes creado tu proyecto con Flutter en Android Studio.

Yo lo he creado siguiendo los pasos de este tutorial del blog de Nube Colectiva.

Lo que haremos es mostrar un video en formato MP4.

También puedes mostrar un video de YouTube u otra plataforma, eso lo veremos en otro tutorial.

Instalación del paquete video_player

Flutter cuenta con el paquete video_player que nos permite cargar un video en nuestra aplicación Flutter:

Para instalar este paquete abre la terminal de Android Studio y ejecuta el siguiente comando:


flutter pub add video_player

Resolving dependencies... 
Downloading packages... (5.8s)
  collection 1.18.0 (1.19.0 available)
+ csslib 1.0.0
+ flutter_web_plugins 0.0.0 from sdk flutter
+ html 0.15.4
  leak_tracker 10.0.5 (10.0.7 available)
  leak_tracker_flutter_testing 3.0.5 (3.0.8 available)
  material_color_utilities 0.11.1 (0.12.0 available)
+ plugin_platform_interface 2.1.8
  string_scanner 1.2.0 (1.3.0 available)
  test_api 0.7.2 (0.7.3 available)
+ video_player 2.9.1
+ video_player_android 2.7.3
+ video_player_avfoundation 2.6.1
+ video_player_platform_interface 6.2.2
+ video_player_web 2.3.2
+ web 1.0.0
Changed 10 dependencies!
6 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

flutter pub add video_player

Resolving dependencies...

Downloading packages... (5.8s)

collection 1.18.0 (1.19.0 available)

+ csslib 1.0.0

+ flutter_web_plugins 0.0.0 from sdk flutter

+ html 0.15.4

leak_tracker 10.0.5 (10.0.7 available)

leak_tracker_flutter_testing 3.0.5 (3.0.8 available)

material_color_utilities 0.11.1 (0.12.0 available)

+ plugin_platform_interface 2.1.8

string_scanner 1.2.0 (1.3.0 available)

test_api 0.7.2 (0.7.3 available)

+ video_player 2.9.1

+ video_player_android 2.7.3

+ video_player_avfoundation 2.6.1

+ video_player_platform_interface 6.2.2

+ video_player_web 2.3.2

+ web 1.0.0

Changed 10 dependencies!

6 packages have newer versions incompatible with dependency constraints.

Try `flutter pub outdated` for more information.

Luego de instalar el paquete anterior, ya podemos reproducir videos en nuestro proyecto creado con Flutter en Android Studio.

Sabías que Flutter esta creado con los lenguajes de programación C, C++ y Dart.

Configurando la reproducción del video

Vamos a reproducir un video que tenemos en un servidor o hosting.

Abrimos el archivo main.dart y agregamos el siguiente código (He colocado comentarios para explicar que hacen las líneas más importantes del código):


import 'package:flutter/material.dart';

// Importamos el paquete 'video_player'
import 'package:video_player/video_player.dart';

// Llamamos a la clase MyApp en la función principal
void main() {
  runApp(const MyApp());
}

// Clase MyApp
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  // Configuramos nuestro estado
  @override
  EstadoAppVideo createState() => EstadoAppVideo();

}

// Clase para configurar nuestro reproductor de video
class EstadoAppVideo extends State<MyApp> {

  // Variable para el botón play o reproducir
  late VideoPlayerController control;

  // URL del video
  @override
  void initState() {
    super.initState();
    control = VideoPlayerController.networkUrl(Uri.parse(
        'https://blog.nubecolectiva.com/wp-content/uploads/2024/08/formulario-en-linea-creado-con-bootstrap-5.mp4'))
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  // Creamos el contenedor principal para la aplicación
  // Con sus elementos necesarios
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: control.value.isInitialized
              ? AspectRatio(
            aspectRatio: control.value.aspectRatio,
            child: VideoPlayer(control),
          )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              control.value.isPlaying
                  ? control.pause()
                  : control.play();
            });
          },
          child: Icon(
            control.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  // Evitamos la fuga de memoria con dispose()
  @override
  void dispose() {
    control.dispose();
    super.dispose();
  }

}

import 'package:flutter/material.dart';

// Importamos el paquete 'video_player'

import 'package:video_player/video_player.dart';

// Llamamos a la clase MyApp en la función principal

void main() {

runApp(const MyApp());

}

// Clase MyApp

class MyApp extends StatefulWidget {

const MyApp({super.key});

// Configuramos nuestro estado

@override

EstadoAppVideo createState() => EstadoAppVideo();

}

// Clase para configurar nuestro reproductor de video

class EstadoAppVideo extends State<MyApp> {

// Variable para el botón play o reproducir

late VideoPlayerController control;

// URL del video

@override

void initState() {

super.initState();

control = VideoPlayerController.networkUrl(Uri.parse(

'https://blog.nubecolectiva.com/wp-content/uploads/2024/08/formulario-en-linea-creado-con-bootstrap-5.mp4'))

..initialize().then((_) {

// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.

setState(() {});

});

}

// Creamos el contenedor principal para la aplicación

// Con sus elementos necesarios

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

home: Scaffold(

body: Center(

child: control.value.isInitialized

? AspectRatio(

aspectRatio: control.value.aspectRatio,

child: VideoPlayer(control),

)

: Container(),

floatingActionButton: FloatingActionButton(

onPressed: () {

setState(() {

control.value.isPlaying

? control.pause()

: control.play();

});

child: Icon(

control.value.isPlaying ? Icons.pause : Icons.play_arrow,

);

}

// Evitamos la fuga de memoria con dispose()

@override

void dispose() {

control.dispose();

super.dispose();

}

Reproduciendo el video en Flutter

Si ejecutamos el emulador de Android Studio.

Podemos ver que nuestro video se reproduce correctamente en nuestra aplicación creada con Flutter en Android Studio:

Mostrando el video correctamente en la aplicación Flutter en Android Studio — Hasta la fecha de este tutorial, Flutter le agrega automáticamente los permisos de Internet al archivo AndroidManifest.xml

Así de fácil puedes mostrar y reproducir un video en Flutter en Android Studio.

Conoce estos 5 Consejos Para Tu Próximo Proyecto con Flutter.

Conclusión

En este tutorial has aprendido a Cómo Mostrar Un Video en Flutter en Android.

Te será de guía para que puedas reproducir videos en tus aplicaciones creadas con Flutter.

Solo con la práctica constante serás un gran desarrollador en Flutter.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Flutter
24-08-2024
04-09-2024
Crear un Post - Eventos Devs - Foro

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Cómo Mostrar Un Video en Flutter en Android

Mostrando el Video en Android

Instalación del paquete video_player

Configurando la reproducción del video

Reproduciendo el video en Flutter

Conclusión

Nota(s)

+ Artículos y Tutoriales

Todas Nuestras Páginas y Categorías:

Partners