유튜브 영상 종료시 전체 화면 롤백 추가
This commit is contained in:
girinb
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:http/http.dart' as http;
|
||||
import 'dart:convert';
|
||||
import 'plan_page_detail.dart'; // <<< plan_page_detail.dart 파일을 import 합니다.
|
||||
|
||||
// HomePage에서 사용하던 CaseStudyPlan 모델을 PlanPage에서도 사용하거나,
|
||||
// PlanPage에 필요한 별도의 데이터 모델을 정의할 수 있습니다.
|
||||
@@ -90,78 +91,104 @@ class _PlanPageState extends State<PlanPage> {
|
||||
itemCount: plans.length,
|
||||
itemBuilder: (context, index) {
|
||||
final plan = plans[index];
|
||||
return Card(
|
||||
margin:
|
||||
const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
|
||||
elevation: 2.0,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Text(
|
||||
plan.planTitle,
|
||||
style: const TextStyle(
|
||||
fontSize: 17.0, fontWeight: FontWeight.bold),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8.0),
|
||||
Text(
|
||||
plan.planTeacher,
|
||||
style: const TextStyle(
|
||||
fontSize: 13.0, color: Colors.grey),
|
||||
),
|
||||
],
|
||||
return InkWell( // <<< Card를 InkWell로 감싸서 탭 이벤트를 추가합니다.
|
||||
onTap: () {
|
||||
// plan_page_detail로 이동하면서 planId를 arguments로 전달
|
||||
if (plan.planId == 'ID 없음' || plan.planId.isEmpty) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('유효한 Plan ID가 없어 상세 페이지로 이동할 수 없습니다.')),
|
||||
);
|
||||
return;
|
||||
}
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => const plan_page_detail(), // plan_page_detail 위젯을 생성
|
||||
settings: RouteSettings(
|
||||
arguments: plan.planId, // 선택된 plan의 ID를 전달
|
||||
),
|
||||
const SizedBox(height: 8.0),
|
||||
if (plan.thumbnail.isNotEmpty)
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
child: Image.network(
|
||||
plan.thumbnail,
|
||||
height: 140, // 약간 작은 이미지 크기
|
||||
width: double.infinity,
|
||||
fit: BoxFit.cover,
|
||||
loadingBuilder: (BuildContext context, Widget child,
|
||||
ImageChunkEvent? loadingProgress) {
|
||||
if (loadingProgress == null) return child;
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
value: loadingProgress.expectedTotalBytes !=
|
||||
null
|
||||
? loadingProgress.cumulativeBytesLoaded /
|
||||
loadingProgress.expectedTotalBytes!
|
||||
: null,
|
||||
),
|
||||
);
|
||||
},
|
||||
errorBuilder: (BuildContext context, Object exception,
|
||||
StackTrace? stackTrace) {
|
||||
return Container(
|
||||
height: 140,
|
||||
color: Colors.grey[200],
|
||||
child: const Center(
|
||||
child: Icon(Icons.broken_image,
|
||||
color: Colors.grey, size: 40)));
|
||||
},
|
||||
),
|
||||
)
|
||||
else
|
||||
Container(
|
||||
height: 140,
|
||||
color: Colors.grey[200],
|
||||
child: const Center(
|
||||
child: Text('No Image',
|
||||
style: TextStyle(color: Colors.grey)))),
|
||||
const SizedBox(height: 8.0),
|
||||
// PlanPage용 ListView 아이템에 추가적인 정보를 표시하거나 다른 UI를 구성할 수 있습니다.
|
||||
Text('Plan ID: ${plan.planId}', style: TextStyle(fontSize: 12.0, color: Colors.blueGrey)),
|
||||
],
|
||||
),
|
||||
);
|
||||
// 만약 Named Route를 사용하고 main.dart에 '/plan_detail' 라우트가 정의되어 있다면:
|
||||
// Navigator.pushNamed(
|
||||
// context,
|
||||
// '/plan_detail', // MaterialApp에 정의된 라우트 이름
|
||||
// arguments: plan.planId,
|
||||
// );
|
||||
},
|
||||
child: Card( // <<< 기존 Card 위젯
|
||||
margin:
|
||||
const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
|
||||
elevation: 2.0,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Text(
|
||||
plan.planTitle,
|
||||
style: const TextStyle(
|
||||
fontSize: 17.0, fontWeight: FontWeight.bold),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8.0),
|
||||
Text(
|
||||
plan.planTeacher,
|
||||
style: const TextStyle(
|
||||
fontSize: 13.0, color: Colors.grey),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8.0),
|
||||
if (plan.thumbnail.isNotEmpty)
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
child: Image.network(
|
||||
plan.thumbnail,
|
||||
height: 140, // 약간 작은 이미지 크기
|
||||
width: double.infinity,
|
||||
fit: BoxFit.cover,
|
||||
loadingBuilder: (BuildContext context, Widget child,
|
||||
ImageChunkEvent? loadingProgress) {
|
||||
if (loadingProgress == null) return child;
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
value: loadingProgress.expectedTotalBytes !=
|
||||
null
|
||||
? loadingProgress.cumulativeBytesLoaded /
|
||||
loadingProgress.expectedTotalBytes!
|
||||
: null,
|
||||
),
|
||||
);
|
||||
},
|
||||
errorBuilder: (BuildContext context, Object exception,
|
||||
StackTrace? stackTrace) {
|
||||
return Container(
|
||||
height: 140,
|
||||
color: Colors.grey[200],
|
||||
child: const Center(
|
||||
child: Icon(Icons.broken_image,
|
||||
color: Colors.grey, size: 40)));
|
||||
},
|
||||
),
|
||||
)
|
||||
else
|
||||
Container(
|
||||
height: 140,
|
||||
color: Colors.grey[200],
|
||||
child: const Center(
|
||||
child: Text('No Image',
|
||||
style: TextStyle(color: Colors.grey)))),
|
||||
// const SizedBox(height: 8.0),
|
||||
// // PlanPage용 ListView 아이템에 추가적인 정보를 표시하거나 다른 UI를 구성할 수 있습니다.
|
||||
// Text('Plan ID: ${plan.planId}', style: TextStyle(fontSize: 12.0, color: Colors.blueGrey)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -59,6 +59,8 @@ class _YoutubePlayerPageState extends State<YoutubePlayerPage> {
|
||||
flags: const YoutubePlayerFlags(
|
||||
autoPlay: true,
|
||||
mute: false,
|
||||
// <<< 동영상 재생이 끝나면 컨트롤러를 자동으로 숨기지 않도록 설정 (선택적) >>>
|
||||
// hideControls: false, // 기본값은 true
|
||||
),
|
||||
)..addListener(_playerListener);
|
||||
} else {
|
||||
@@ -70,6 +72,34 @@ class _YoutubePlayerPageState extends State<YoutubePlayerPage> {
|
||||
void _playerListener() {
|
||||
if (_controller == null || !mounted) return;
|
||||
|
||||
// <<< 재생 상태 감지 >>>
|
||||
if (_controller!.value.playerState == PlayerState.ended) {
|
||||
// 동영상 재생이 완료되었을 때 처리할 로직
|
||||
print("Video has ended.");
|
||||
if (mounted) {
|
||||
// 전체 화면 모드였다면 해제
|
||||
if (_controller!.value.isFullScreen) {
|
||||
_controller!.toggleFullScreenMode();
|
||||
}
|
||||
// 시스템 UI를 다시 보이도록 설정 (toggleFullScreenMode가 자동으로 처리할 수도 있음)
|
||||
_showSystemUi();
|
||||
// 세로 화면으로 복귀 (toggleFullScreenMode가 자동으로 처리할 수도 있음)
|
||||
SystemChrome.setPreferredOrientations([
|
||||
DeviceOrientation.portraitUp,
|
||||
DeviceOrientation.portraitDown,
|
||||
]);
|
||||
|
||||
// 필요하다면 페이지를 pop 하거나 다른 동작 수행
|
||||
// 예: Navigator.of(context).pop();
|
||||
// 또는 사용자에게 알림 표시
|
||||
// ScaffoldMessenger.of(context).showSnackBar(
|
||||
// const SnackBar(content: Text('동영상 재생이 완료되었습니다.')),
|
||||
// );
|
||||
}
|
||||
return; // ended 상태 처리 후 리스너의 나머지 로직은 건너뛸 수 있음
|
||||
}
|
||||
|
||||
|
||||
if (_controller!.value.isFullScreen) {
|
||||
_hideSystemUi();
|
||||
// 플레이어가 전체 화면으로 진입하면 가로 방향으로 설정 (선택적, 플레이어가 자동으로 할 수 있음)
|
||||
@@ -251,6 +281,20 @@ class _YoutubePlayerPageState extends State<YoutubePlayerPage> {
|
||||
}
|
||||
print('Player is ready.');
|
||||
},
|
||||
// <<< 필요하다면 onEnded 콜백 직접 사용 가능 (addListener와 중복될 수 있으니 주의) >>>
|
||||
// onEnded: (metadata) {
|
||||
// print("Video has ended (onEnded callback).");
|
||||
// if (mounted) {
|
||||
// if (_controller!.value.isFullScreen) {
|
||||
// _controller!.toggleFullScreenMode();
|
||||
// }
|
||||
// _showSystemUi();
|
||||
// SystemChrome.setPreferredOrientations([
|
||||
// DeviceOrientation.portraitUp,
|
||||
// DeviceOrientation.portraitDown,
|
||||
// ]);
|
||||
// }
|
||||
// },
|
||||
),
|
||||
),
|
||||
bottomNavigationBar: isFullScreen
|
||||
@@ -286,7 +330,8 @@ class _YoutubePlayerPageState extends State<YoutubePlayerPage> {
|
||||
|
||||
@override
|
||||
void deactivate() {
|
||||
if (_controller != null && _isPlayerReady) {
|
||||
// 페이지가 비활성화될 때 (예: 다른 화면으로 전환될 때) 플레이어 일시 중지
|
||||
if (_controller != null && _isPlayerReady && _controller!.value.isPlaying) {
|
||||
_controller!.pause();
|
||||
}
|
||||
super.deactivate();
|
||||
|
||||
Reference in New Issue
Block a user