I have a page in my flutter app called ChooseVideoPage to pick a video, and after picking the video file i navigate to the next page which called AppPage that display the video, and i have an icon in appbar in this page to pick another video file to play in the same page AppPage instaed the current video.
// ChooseVideoPage
class ChooseVideoPage extends StatelessWidget {
const ChooseVideoPage({super.key});
@override
Widget build(BuildContext context) {
return BlocConsumer<AppCubit, AppState>(
listener: (context, state){
if(state is PickVideoState){
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return const AppPage();
}));
}
},
builder: (context, state){
return Scaffold(
body: Center(
child: TextButton(
onPressed: (){
context.read<AppCubit>().pickVideoFile();
},
child: const Text('Pick a video'),
),
),
);
},
);
}
}
/// AppPage
class AppPage extends StatefulWidget {
const AppPage({super.key, });
@override
State<AppPage> createState() => _AppPageState();
}
class _AppPageState extends State {
late AppCubit appCubit;
@override
void initState() {
super.initState();
appCubit = BlocProvider.of<AppCubit>(context, listen: false);
appCubit.initVideo();
}
@override
void dispose() {
appCubit.videoPlayerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return BlocConsumer<AppCubit, AppState>(
listener: (context, state){
if(state is PickVideoState){
appCubit.initVideo();
}
},
builder: (context, state){
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
onPressed: (){
appCubit.pickVideoFile();
},
icon: const Icon(Icons.video_collection_outlined))
],
),
body: SizedBox(
width: double.infinity,
height: double.infinity,
child: AspectRatio(
aspectRatio: appCubit.videoPlayerController.value.aspectRatio,
child: Padding(
padding: const EdgeInsets.all(1.0),
child:Container(
width: double.infinity,
height: double.infinity,
padding: const EdgeInsets.all(12),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: VideoPlayer(appCubit.videoPlayerController,)))
),
),
),
);
},
);
}
}
// Bloc class
class AppCubit extends Cubit<AppState> {
AppCubit() : super(AppInitial());
File? video;
final ImagePicker picker = ImagePicker();
pickVideoFile()async{
try{
XFile? videoFile = await picker.pickVideo(source: ImageSource.gallery);
if(videoFile == null) return null;
video = File(videoFile.path);
emit(PickVideoState());
} catch(error){
}
}
late VideoPlayerController videoPlayerController;
initVideo()async{
try{
videoPlayerController = VideoPlayerController.file(File(video!.path));
await videoPlayerController.initialize();
await videoPlayerController.play();
await videoPlayerController.setLooping(true);
emit(InitVideoState());
}catch (error){
}
}
}
i tried to do that but i don’t know how to re-initialize the video player again, i tried many times but i got issues with that.
I am using Flutter BLoC as a state management, Can any one tell me what to do to solve this issue?
Here’s the code:
yousef ibrahim is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.