Skip to content

Commit

Permalink
add youtube player
Browse files Browse the repository at this point in the history
  • Loading branch information
@Goggxi
Goggxi committed Nov 24, 2022
1 parent ea21c67 commit 8d7a4b3
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 78 deletions.
127 changes: 73 additions & 54 deletions lib/movie/components/movie_now_playing_component.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:yt_flutter_movie_db/movie/pages/movie_detail_page.dart';
import 'package:yt_flutter_movie_db/movie/providers/movie_get_now_playing_provider.dart';
import 'package:yt_flutter_movie_db/widget/image_widget.dart';

Expand Down Expand Up @@ -43,68 +44,86 @@ class _MovieNowPlayingComponentState extends State<MovieNowPlayingComponent> {
itemBuilder: (_, index) {
final movie = provider.movies[index];

return Container(
padding: const EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width * 0.8,
height: 200,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black12,
],
),
borderRadius: BorderRadius.circular(12.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageNetworkWidget(
imageSrc: movie.posterPath,
height: 200,
width: 120,
radius: 12.0,
return Stack(
children: [
Container(
padding: const EdgeInsets.all(8.0),
width: MediaQuery.of(context).size.width * 0.8,
height: 200,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black12,
],
),
borderRadius: BorderRadius.circular(12.0),
),
const SizedBox(width: 8.0),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
movie.title,
style: const TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
Row(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageNetworkWidget(
imageSrc: movie.posterPath,
height: 200,
width: 120,
radius: 12.0,
),
const SizedBox(width: 8.0),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.star_rounded,
color: Colors.amber,
Text(
movie.title,
style: const TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
const Icon(
Icons.star_rounded,
color: Colors.amber,
),
Text(
'${movie.voteAverage} (${movie.voteCount})',
style: const TextStyle(fontSize: 16.0),
),
],
),
Text(
'${movie.voteAverage} (${movie.voteCount})',
style: const TextStyle(fontSize: 16.0),
movie.overview,
maxLines: 3,
style: const TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w400,
),
),
],
),
Text(
movie.overview,
maxLines: 3,
style: const TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w400,
),
),
],
)
],
),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (_) {
return MovieDetailPage(id: movie.id);
},
));
},
),
)
],
),
),
),
],
);
},
separatorBuilder: (_, __) => const SizedBox(
Expand Down
8 changes: 8 additions & 0 deletions lib/movie/components/movie_top_rated_component.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:yt_flutter_movie_db/movie/pages/movie_detail_page.dart';
import 'package:yt_flutter_movie_db/movie/providers/movie_get_top_rated_provider.dart';
import 'package:yt_flutter_movie_db/widget/image_widget.dart';

Expand Down Expand Up @@ -45,6 +46,13 @@ class _MovieTopRatedComponentState extends State<MovieTopRatedComponent> {
height: 200,
width: 120,
radius: 12.0,
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (_) {
return MovieDetailPage(id: provider.movies[index].id);
},
));
},
);
},
separatorBuilder: (_, __) => const SizedBox(
Expand Down
18 changes: 18 additions & 0 deletions lib/movie/pages/movie_detail_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import 'package:yt_flutter_movie_db/movie/providers/movie_get_videos_provider.da
import 'package:yt_flutter_movie_db/widget/image_widget.dart';
import 'package:yt_flutter_movie_db/widget/item_movie_widget.dart';
import 'package:yt_flutter_movie_db/widget/webview_widget.dart';
import 'package:yt_flutter_movie_db/widget/youtube_player_widget.dart';

class MovieDetailPage extends StatelessWidget {
const MovieDetailPage({super.key, required this.id});
Expand Down Expand Up @@ -74,6 +75,23 @@ class MovieDetailPage extends StatelessWidget {
),
),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => YoutubePlayerWldget(
youtubeKey: vidio.key,
),
),
);
},
),
),
),
],
);
},
Expand Down
3 changes: 3 additions & 0 deletions lib/movie/pages/movie_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ class MoviePage extends StatelessWidget {
},
),
const MovieNowPlayingComponent(),
const SliverToBoxAdapter(
child: SizedBox(height: 16),
),
],
),
);
Expand Down
9 changes: 9 additions & 0 deletions lib/movie/pages/movie_pagination_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import 'package:yt_flutter_movie_db/movie/providers/movie_get_now_playing_provid
import 'package:yt_flutter_movie_db/movie/providers/movie_get_top_rated_provider.dart';
import 'package:yt_flutter_movie_db/widget/item_movie_widget.dart';

import 'movie_detail_page.dart';

enum TypeMovie { discover, topRated, nowPlaying }

class MoviePaginationPage extends StatefulWidget {
Expand Down Expand Up @@ -81,6 +83,13 @@ class _MoviePaginationPageState extends State<MoviePaginationPage> {
widthBackdrop: double.infinity,
heightPoster: 140,
widthPoster: 80,
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (_) {
return MovieDetailPage(id: item.id);
},
));
},
),
),
separatorBuilder: (context, index) => const SizedBox(height: 10),
Expand Down
62 changes: 38 additions & 24 deletions lib/widget/image_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ class ImageNetworkWidget extends StatelessWidget {
this.type = TypeSrcImg.movieDb,
this.height,
this.width,
this.onTap,
this.radius = 0.0,
});

Expand All @@ -18,36 +19,49 @@ class ImageNetworkWidget extends StatelessWidget {
final double? height;
final double? width;
final double radius;
final void Function()? onTap;

@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: Image.network(
type == TypeSrcImg.movieDb
? '${AppConstants.imageUrlW500}$imageSrc'
: imageSrc!,
height: height,
width: width,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
return Container(
return Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: Image.network(
type == TypeSrcImg.movieDb
? '${AppConstants.imageUrlW500}$imageSrc'
: imageSrc!,
height: height,
width: width,
color: Colors.black26,
child: child,
);
},
errorBuilder: (_, __, ___) {
return SizedBox(
height: height,
width: width,
child: const Icon(
Icons.broken_image_rounded,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
return Container(
height: height,
width: width,
color: Colors.black26,
child: child,
);
},
errorBuilder: (_, __, ___) {
return SizedBox(
height: height,
width: width,
child: const Icon(
Icons.broken_image_rounded,
),
);
},
),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
),
);
},
),
),
),
],
);
}
}
60 changes: 60 additions & 0 deletions lib/widget/youtube_player_widget.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YoutubePlayerWldget extends StatefulWidget {
const YoutubePlayerWldget({super.key, required this.youtubeKey});

final String youtubeKey;

@override
State<YoutubePlayerWldget> createState() => _YoutubePlayerWldgetState();
}

class _YoutubePlayerWldgetState extends State<YoutubePlayerWldget> {
late final YoutubePlayerController _controller;
@override
void initState() {
_controller = YoutubePlayerController(
initialVideoId: widget.youtubeKey,
flags: const YoutubePlayerFlags(
autoPlay: true,
mute: false,
enableCaption: false,
),
);
super.initState();
}

@override
Widget build(BuildContext context) {
return YoutubePlayerBuilder(
onEnterFullScreen: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
},
onExitFullScreen: () {
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [
SystemUiOverlay.bottom,
SystemUiOverlay.top,
],
);
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
},
player: YoutubePlayer(controller: _controller),
builder: (_, player) => player,
);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}
}

0 comments on commit 8d7a4b3

Please sign in to comment.