Why won't my Dart Video App code compile? - flutter

I'm working on a Flutterflow project and when I attempt to compile my widget inside of the custom widget section it returns multiple errors. Here is the code directly from pub.dev and I am adding the dependencies in the right section but I am continually getting the same errors.
import 'package:video_player/video_player.dart';
void main() => runApp(const VideoApp());
/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
const VideoApp({Key? key}) : super(key: key);
#override
_VideoAppState createState() => _VideoAppState();
}
class _VideoAppState extends State<VideoApp> {
late VideoPlayerController _controller;
#override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
#override
void dispose() {
super.dispose();
_controller.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(() {});
});
}

Is it possible to create a video player in stateless widget in flutter?

I was trying to create a videoplayer in a stateless widget in flutter. I could not do it.... this is the code I used ...Is it possible to create a video player in a stateless widget?
class VideoWidget extends StatelessWidget {
VideoWidget({Key? key}) : super(key: key);
final videoController =
VideoPlayerController.network('https://youtu.be/_EoLNs5m-7Y?t=4')
..initialize();
#override
Widget build(BuildContext context) {
return SizedBox(
width: MediaQuery.of(context).size.width,
//height: 500,
child: Column(
children: [
//VideoPlayer(videoController!),
ValueListenableBuilder(
valueListenable: videoPlayerNotifier,
builder: (BuildContext cxt, play, widget_) {
return videoController.value.isInitialized
? AspectRatio(
aspectRatio: videoController.value.aspectRatio,
child: VideoPlayer(videoController))
: Container();
}),
const Text(
'movieName',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const Text('Description'),
FloatingActionButton(onPressed: () {
videoPlayerNotifier.value = true;
})
],
),
);
}
}
VideoPlayer from the video_player pub package is quite stateful, due especially to VideoPlayerController. However, you can wrap it in a StatefulWidget to be used within a StatelessWidget. E.g. use this wrapper within a stateless widget:
class VideoPlayerWrapper extends StatefulWidget {
final String videoUri;
const VideoPlayerWrapper({Key? key, required this.videoUri}) : super(key: key);
#override
_VideoPlayerWrapperState createState() => _VideoPlayerWrapperState(videoUri);
}
class _VideoPlayerWrapperState extends State<VideoPlayerWrapper> {
late VideoPlayerController _controller;
final String videoUri;
_VideoPlayerWrapperState(this.videoUri);
#override
void initState() {
super.initState();
_controller = VideoPlayerController.network(videoUri)
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
_controller.play();
}
#override
Widget build(BuildContext context) {
return Center(
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
);
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
}

How to play rive animation onTap?

I was happy bcs there was easy solution for flare package, but unfortunately now I have .riv format, so there is only rive package for me.
All examples I saw where playing animation instantly after screen loaded, but I need it to be started with function (button, onpressed etc).
class Animation extends StatefulWidget {
#override
_AnimationState createState() => _AnimationState();
}
class _AnimationState extends State<Animation> {
RiveAnimationController controller;
#override
void initState() {
super.initState();
controller = SimpleAnimation('Animation 1');
}
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: RiveAnimation.asset(
'match.riv',
controllers: [controller],
),
),
);
}
}
thank you in advance
From rive's official documentation, pass one more parameter to SimpleAnimation
class PlayPauseAnimation extends StatefulWidget {
const PlayPauseAnimation({Key? key}) : super(key: key);
#override
_PlayPauseAnimationState createState() => _PlayPauseAnimationState();
}
class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
// Controller for playback
late RiveAnimationController _controller;
// Toggles between play and pause animation states
void _togglePlay() =>
setState(() => _controller.isActive = !_controller.isActive);
/// Tracks if the animation is playing by whether controller is running
bool get isPlaying => _controller.isActive;
#override
void initState() {
super.initState();
_controller = SimpleAnimation('Animation 1', autoplay: false);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RiveAnimation.network(
'match.riv',
controllers: [_controller],
// Update the play state when the widget's initialized
onInit: (_) => setState(() {}),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _togglePlay,
tooltip: isPlaying ? 'Pause' : 'Play',
child: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}

Impossible to play video in flutter

I try to play video in flutter, and when i launch my code i have this problem
Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel., null, null)
This my code:
I create a class VideoApp extend statefulwidget.
_controller contain the video
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(VideoApp());
class VideoApp extends StatefulWidget {
#override
_VideoAppState createState() => _VideoAppState();
}
class _VideoAppState extends State<VideoApp> {
VideoPlayerController _controller;
#override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
}

Rebuilding a Widget in a column

So I have 2 widgets in a column. 1 is a listview of containers and another is a Column of TabBar and TabBarView. I wrote this code which helps me store the current index is the TabView selected
TabController _tabController;
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 4);
_tabController.addListener(() {
globals.tabIndex = _tabController.index;
});
}
As per the image I want to change the color of the tile as the active listview changes (Active container is blue). The containers have an onTap functions which changes their color as they are pressed. Is there anyway I can rebuild the top containers when the listview Index changes?
You can simply call the setState function to rebuild the widget;
import 'dart:ui';
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Example(),
),
);
}
}
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
TabController _tabController;
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 4);
_tabController.addListener(() {
setState(() {});
});
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
_Item(
isActive: _tabController.index == 0,
onTap: () => _tabController.animateTo(0),
),
_Item(
isActive: _tabController.index == 1,
onTap: () => _tabController.animateTo(1),
),
_Item(
isActive: _tabController.index == 2,
onTap: () => _tabController.animateTo(2),
),
_Item(
isActive: _tabController.index == 3,
onTap: () => _tabController.animateTo(3),
),
],
),
TabBar(
controller: _tabController,
tabs: <Widget>[
_TabItem(
'one',
),
_TabItem('two'),
_TabItem('three'),
_TabItem('four'),
],
)
],
);
}
}
class _TabItem extends StatelessWidget {
final String title;
const _TabItem(this.title, {Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(color: Colors.black),
);
}
}
class _Item extends StatelessWidget {
final bool isActive;
final Function onTap;
const _Item({Key key, this.isActive, this.onTap}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
height: 80,
width: 50,
color: isActive ? Colors.blue : Colors.grey,
child: Text('hey'),
),
);
}
}
Hey there created a simple example to show how you would achieve this. Uses all the components you mentioned, tabBar, TabBarView, ListViewBuilder to create the list.
And onTap of the element use the tabController to animate to the Tab. And this subsequently trigger the addListener callaback which updates the currentSelected Index.
https://dartpad.dev/5f5475b790fe9a75b26c1f686adab96e