LateInitializationError Chewie in flutter - flutter

LateInitializationError: Field '_latestValue#875205881' has not been initialized
Error image
I do not know what is the cause of the problem I tried to put ? Instead of late but there are still mistakes
Help me, thanks
video_screen.dart
import 'package:flutter/material.dart';
import '../screens/chewie_list_item.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
class VideoScreen extends StatefulWidget {
const VideoScreen({Key? key}) : super(key: key);
#override
_VideoScreenState createState() => _VideoScreenState();
}
class _VideoScreenState extends State<VideoScreen> {
ChewieController? _chewieController;
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
ChewieListItem(
videoPlayerController: VideoPlayerController.asset(
'videos/video1.mp4',
),
looping: true,
),
ChewieListItem(
videoPlayerController: VideoPlayerController.asset(
'videos/video2.mp4',
),
looping: true,
),
],
),
);
}
}
chewie_list_item.dart
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class ChewieListItem extends StatefulWidget {
// This will contain the URL/asset path which we want to play
final VideoPlayerController videoPlayerController;
final bool looping;
ChewieListItem({
required this.videoPlayerController,
required this.looping,
Key? key,
}) : super(key: key);
#override
_ChewieListItemState createState() => _ChewieListItemState();
}
class _ChewieListItemState extends State<ChewieListItem> {
late ChewieController _chewieController;
#override
void initState() {
super.initState();
// Wrapper on top of the videoPlayerController
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio: 16 / 9,
// Prepare the video to be played and display the first frame
autoInitialize: true,
looping: widget.looping,
// Errors can occur for example when trying to play a video
// from a non-existent URL
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(8.0),
child: Chewie(
controller: _chewieController,
),
);
}
#override
void dispose() {
super.dispose();
// IMPORTANT to dispose of all the used resources
widget.videoPlayerController.dispose();
_chewieController.dispose();
}
}

Related

Flutter problems playing video with Chewie and Video Player

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
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(() {});
});
}

LateInitializationError: Field '_chewieController' has not been initialized in flutter

I am have issues with my my video-player all issue lead to this point but I don't know what to do once I click on the play button I get this error please I need help with the initialization
Reload already in progress, ignoring request
Restarted application in 1,023ms.
════════ Exception caught by widgets library ═══════════════════════════════════
The following LateError was thrown building Video(dirty, state: _VideoState#4a5db):
LateInitializationError: Field '_chewieController#50055179' has not been initialized.
The relevant error-causing widget was
Video
package:goodwork/allscreens/videoplayer.dart:69
When the exception was thrown, this was the stack
#0 _VideoState._chewieController (package:goodwork/allscreens/videoplayer.dart)
package:goodwork/allscreens/videoplayer.dart:1
enter image description here
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class Video extends StatefulWidget {
final VideoPlayerController videoPlayerController;
final bool loop;
Video({
required this.videoPlayerController,
required this.loop,
Key? key,
}) : super(key: key);
#override
_VideoState createState() => _VideoState();
}
class _VideoState extends State<Video> {
late ChewieController _chewieController;
#override
void iniState() {
super.initState();
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
looping: widget.loop,
aspectRatio: 16 / 9,
autoInitialize: true);
}
#override
Widget build(BuildContext context) {
return Chewie(
controller: _chewieController,
);
}
#override
void dispose() {
super.dispose();
widget.videoPlayerController.dispose();
_chewieController.dispose();
}
}
class Videoplayers extends StatefulWidget {
final String videodata;
Videoplayers({required this.videodata});
#override
_VideoplayersState createState() => _VideoplayersState();
}
class _VideoplayersState extends State<Videoplayers> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: const Text(
"Video Player",
style: TextStyle(color: Colors.black),
),
leading: const Image(
image: AssetImage("images/logo.png"),
)),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Video(
loop: true,
videoPlayerController:
VideoPlayerController.network(widget.videodata),
),
),
),
);
}
}
You wrote iniState instead of initState. And after correcting Restart the app, not Reload.

How can I get my flutter video player to work for Chrome Web, correctly

I am getting videoplayer overflow. How do I resize my video player, so it correctly works. Error message "A RenderFlex overflowed by 93 pixels on the right" during window resizing.
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:provider/provider.dart';
class VolumeManager with ChangeNotifier{
var _volume=50.0;
double get volume=>_volume;
void setVolume({
required double volumeValue,
required VideoPlayerController controller
}){
_volume=volumeValue;
controller.setVolume(_volume);
notifyListeners();
}
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Video',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:
ChangeNotifierProvider(create:(context)=>VolumeManager(),child: Test_LoadVideoWidget()),
);
}
}
class Test_LoadVideoWidget extends StatefulWidget {
Test_LoadVideoWidget({Key? key}) : super(key: key);
#override
State<Test_LoadVideoWidget> createState() => _Test_LoadVideoWidgetState();
}
class _Test_LoadVideoWidgetState extends State<Test_LoadVideoWidget> {
late final VideoPlayerController controller;
late final Future<void>initVideo;
#override
void initState() {
// TODO: implement initState
super.initState();
controller=VideoPlayerController.asset("assets/video/butterfly.mp4");
controller.setLooping(true);
initVideo=controller.initialize();
}
#override
void dispose() {
// TODO: implement dispose
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future:initVideo,
builder:(context,snapshot){
if (snapshot.connectionState==ConnectionState.done){
return Test_VideoWidget(controller);
}
return Center(child:CircularProgressIndicator());
}
);
}
}
class Test_VideoWidget extends StatelessWidget {
final VideoPlayerController controller;
Test_VideoWidget(this.controller);
void _play(){
if (!controller.value.isPlaying){
controller.play();
}
}
void _pause(){
if (controller.value.isPlaying){
controller.pause();
}
}
#override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title:Text("Test Video",style:Theme.of(context).textTheme.headline2)),
body:
Container(
width:MediaQuery.of(context).size.width,
//height:MediaQuery.of(context).size.height,
padding:EdgeInsets.all(20),child:
Column(
mainAxisAlignment:MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AspectRatio(aspectRatio: controller.value.aspectRatio,
child:VideoPlayer(controller),
),
Row(children: [
SizedBox(width:200,child:ElevatedButton(onPressed: (){_play();}, child: Text("Play!",style:Theme.of(context).textTheme.button))),
const SizedBox(height:50,width:200),
SizedBox(width:200,child:ElevatedButton(onPressed:(){_pause();}, child:Text("Pause",style:Theme.of(context).textTheme.button))),
],)
,Consumer<VolumeManager>(
builder:(context,manager,_)
=>Slider(
min: 0,
max: 100,
value: manager.volume,
onChanged: (value) =>
{
manager.setVolume(volumeValue: value, controller: controller)
}
),
)
],)
)
);
}
}
solution: I used SingleChildScrollView to solve the horizontal and vertical renderflex overflow errors. I changed the Consumer to use => notation rather than { return notation.
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:provider/provider.dart';
class VolumeManager with ChangeNotifier{
var _volume=50.0;
double get volume=>_volume;
void setVolume({
required double volumeValue,
required VideoPlayerController controller
}){
_volume=volumeValue;
controller.setVolume(_volume);
notifyListeners();
}
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Video',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:
ChangeNotifierProvider(create:(context)=>VolumeManager(),child: Test_LoadVideoWidget()),
);
}
}
class Test_LoadVideoWidget extends StatefulWidget {
Test_LoadVideoWidget({Key? key}) : super(key: key);
#override
State<Test_LoadVideoWidget> createState() => _Test_LoadVideoWidgetState();
}
class _Test_LoadVideoWidgetState extends State<Test_LoadVideoWidget> {
late final VideoPlayerController controller;
late final Future<void>initVideo;
#override
void initState() {
// TODO: implement initState
super.initState();
controller=VideoPlayerController.asset("assets/video/butterfly.mp4");
//..initialize().then((_){
//controller.play();
//controller.setLooping(true);
setState(() {
});
//});
initVideo = controller.initialize();
}
#override
void dispose() {
// TODO: implement dispose
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
//return Test_VideoWidget(controller);
return FutureBuilder<void>(
future:initVideo,
builder:(context,snapshot){
if (snapshot.connectionState==ConnectionState.done){
return Test_VideoWidget(controller);
}
return Center(child:CircularProgressIndicator());
}
);
}
}
class Test_VideoWidget extends StatelessWidget {
final VideoPlayerController controller;
Test_VideoWidget(this.controller);
void _play(){
if (!controller.value.isPlaying){
controller.play();
}
}
void _pause(){
if (controller.value.isPlaying){
controller.pause();
}
}
#override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title:Text("Test Video",style:Theme.of(context).textTheme.headline2)),
body:
// controller.value.isInitialized?
Container(
width:MediaQuery.of(context).size.width,
height:MediaQuery.of(context).size.height,
padding:EdgeInsets.all(20),child:
SingleChildScrollView(child:Column(
mainAxisAlignment:MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AspectRatio(aspectRatio: controller.value.aspectRatio,
child:VideoPlayer(controller),
),
SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [
SizedBox(width:200,child:ElevatedButton(onPressed: (){_play();}, child: Text("Play!",style:Theme.of(context).textTheme.button))),
const SizedBox(height:50,width:200),
SizedBox(width:200,child:ElevatedButton(onPressed:(){_pause();}, child:Text("Pause",style:Theme.of(context).textTheme.button))),
],))
,Consumer<VolumeManager>(
builder:(context,manager,_)=>
Slider(
min: 0,
max: 50,
value: manager.volume,
onChanged: (value) =>
{
manager.setVolume(volumeValue: value, controller: controller)
}
),
)
],)
)
//:
// Center(child:CircularProgressIndicator()),
));
}
}

Unable To Play Youtube Video in Flutter,

I am getting below error while to implement YouTube video player in my flutter app.
Unhandled Exception: PlatformException(error, java.lang.IllegalStateException: Trying to create a platform view of unregistered type: com.pichillilorenzo/flutter_inappwebview.
how to solve this issue?
YoutubePlayerController controller = YoutubePlayerController(initialVideoId: youtubId);
YoutubePlayer(
controller: controller,
showVideoProgressIndicator: false,
progressIndicatorColor: AppColors.primaryColor,
);
I am using this package
Is there any other better way for playing youtube videos in flutter (apart from Webview)?
import 'package:cooking_genie/src/presentation/core/app_colors.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
class YoutubePlayerWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return YoutubePlayerWidgetState();
}
}
class YoutubePlayerWidgetState extends State<YoutubePlayerWidget> {
//late YoutubePlayerController _controller;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return YoutubePlayer(
controller: YoutubePlayerController(
initialVideoId: 'zn2GwbPG-tc', //Add videoID.
flags: YoutubePlayerFlags(
hideControls: false,
controlsVisibleAtStart: true,
autoPlay: false,
mute: false,
),
),
showVideoProgressIndicator: true,
progressIndicatorColor: AppColors.primaryColor,
);
}
#override
void dispose() {
super.dispose();
}
}
///
class Controls extends StatelessWidget {
///
const Controls();
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_space,
],
),
);
}
Widget get _space => const SizedBox(height: 10);
}
check this widget. and make sure to change minSdkVersion 22 on andorid>app>build.gradle. package require >=17 for android.
import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
class YTplayerCheck extends StatefulWidget {
YTplayerCheck({Key? key}) : super(key: key);
#override
_YTplayerCheckState createState() => _YTplayerCheckState();
}
class _YTplayerCheckState extends State<YTplayerCheck> {
YoutubePlayerController controller = YoutubePlayerController(
initialVideoId: 'iLnmTe5Q2Qw',
flags: YoutubePlayerFlags(
autoPlay: true,
mute: true,
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: YoutubePlayer(
controller: controller,
showVideoProgressIndicator: false,
progressIndicatorColor: Colors.cyanAccent,
),
);
}
}

How to: Stop ListView from rebuilding video_player widget?

I have managed to get a video to play on flutter-web, however, when I scroll the video in the ListView will rebuild/reload.
How can I stop the video_player (in the ListView) from being rebuilt when I scroll?
Sorry for the lengthy code sample.. I'm not sure how to condense it further
Any help would be great! Thanks
import 'package:flutter/material.dart';
import '../../widgets/video/chewie_video.dart';
import 'package:video_player/video_player.dart';
class TestPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Container(height: 1000),
Center(
child: ChewieVideo(
videoPlayerController:
VideoPlayerController.asset('assets/video.mp4'),
),
),
Container(height: 1000),
],
),
);
}
}
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class ChewieVideo extends StatefulWidget {
final VideoPlayerController videoPlayerController;
final bool looping;
ChewieVideo({
#required this.videoPlayerController,
this.looping,
Key key,
}) : super(key: key);
#override
_ChewieVideoState createState() => _ChewieVideoState();
}
class _ChewieVideoState extends State<ChewieVideo> {
ChewieController _chewieController;
#override
void initState() {
super.initState();
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
autoInitialize: true,
aspectRatio: 16 / 9,
looping: widget.looping,
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Chewie(
controller: _chewieController,
),
);
}
#override
void dispose() {
super.dispose();
widget.videoPlayerController.dispose();
_chewieController.dispose();
}
}
I'm not sure if this is a good or just temporary fix but this is how I have managed to get it to work...
If you are using inside of a ListView/CustomScrollView, then you need to adjust the cacheExtent for either of these widgets... I have set mine to 1000.
I'm not quite sure what's happening but it works...
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: primaryBlack,
drawer: NavDrawer(),
body: Scrollbar(
child: CustomScrollView(
cacheExtent: 1000,
slivers: <Widget>[
...
after doing that chewie and video_player plugins shouldn't rebuild/refresh inside of a ListView