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.
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.
Luego de instalar el paquete anterior, ya podemos reproducir videos en nuestro proyecto creado con Flutter en Android Studio.
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://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:
Así de fácil puedes mostrar y reproducir un video en Flutter en Android Studio.
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.