下面是我们使用这两个包的预览屏幕的完整代码：
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:videoproject/screens/PhotoEnlargeViewScreen.dart';
import 'package:videoproject/vendor/Constants.dart';
import 'package:videoproject/vendor/Masterfunctions.dart';
import 'package:videoproject/widgets/CustomLoaderWidget.dart';
import 'package:videoproject/widgets/CustomerLoaderCircularProgressIndicatorWidget.dart';
import 'package:videoproject/widgets/ShowAppDialog.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
class PhotosViewerScreen extends StatefulWidget {
final List filesPathList;
final int fileIndex;
PhotosViewerScreen({required this.filesPathList, this.fileIndex = 0});
@override
_PhotosViewerScreenState createState() => _PhotosViewerScreenState();
}
class _PhotosViewerScreenState extends State<PhotosViewerScreen> {
MasterFunctions mf = MasterFunctions();
CarouselController _carouselController = CarouselController();
List _filesPathList = [];
int? _activeFileIndex;
String? _activeFilePath;
bool _isPlayingVideo = false;
bool _isLoading = false;
YoutubePlayerController? _yTPlayerController;
@override
void initState() {
_filesPathList = widget.filesPathList;
_activeFileIndex = widget.fileIndex;
_activeFilePath = widget.filesPathList[widget.fileIndex];
if (_activeFilePath.toString().indexOf('youtube.com') != -1) {
// video case
_isPlayingVideo = true;
_videoinit();
} else {
// photo case
_isPlayingVideo = false;
}
//
super.initState();
}
customcallbackFunction(
int currentPhotoIndex, CarouselPageChangedReason reason) async {
_activeFileIndex = currentPhotoIndex;
_activeFilePath = _filesPathList[_activeFileIndex as int];
print("_activeFilePath: $_activeFilePath");
//
if (_activeFilePath.toString().indexOf('youtube.com') != -1) {
// video case
_isPlayingVideo = true;
_videoinit();
} else {
// photo case
_isPlayingVideo = false;
}
if (mounted) {
setState(() {});
}
}
_videoinit() {
String videoId;
videoId = YoutubePlayer.convertUrlToId(_activeFilePath.toString())!;
if (_yTPlayerController == null) {
_yTPlayerController = YoutubePlayerController(
initialVideoId: videoId, //'iLnmTe5Q2Qw',
flags: YoutubePlayerFlags(
autoPlay: true,
// mute: true,
),
);
if (mounted) {
setState(() {});
}
} else {
// already initialized a video and wants to play next video
// dispose last video if playing
final _oldYTPlayerController = _yTPlayerController;
WidgetsBinding.instance!.addPostFrameCallback((_) async {
_oldYTPlayerController!.dispose();
// Initing new controller
_yTPlayerController = YoutubePlayerController(
initialVideoId: videoId, //'iLnmTe5Q2Qw',
flags: YoutubePlayerFlags(
autoPlay: true,
// mute: true,
),
);
if (mounted) {
setState(() {});
}
});
//
if (mounted) {
setState(() {
_yTPlayerController = null;
});
}
}
}
@override
Widget build(BuildContext context) {
final double heightWrapper = MediaQuery.of(context).size.height;
bool isPortrait =
(MediaQuery.of(context).orientation == Orientation.portrait);
return CustomLoaderWidget(
isLoadingStatus: _isLoading,
appBodyWidget: Scaffold(
appBar: (_isPlayingVideo == false ||
(_isPlayingVideo == true && isPortrait == true))
? AppBar(
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Text(
(widget.filesPathList.length > 1)
? 'Photos/Videos Preview'
: "${(_activeFilePath.toString().indexOf('youtube.com') != -1) ? 'Video' : 'Photo'} Preview",
style: Theme.of(context).appBarTheme.textTheme!.headline1,
),
if (widget.filesPathList.length > 1)
Text(
// "${(_activeFilePath.toString().indexOf('youtube.com') != -1) ? 'Video' : 'Photo' } ${_activeFileIndex! + 1} out of ${widget.filesPathList.length}",
"Showing ${_activeFileIndex! + 1} out of ${widget.filesPathList.length}",
style: Theme.of(context).textTheme.bodyText2,
),
],
),
actions: [
IconButton(
icon:
Icon(Icons.help, color: Theme.of(context).primaryColor),
onPressed: () {
ShowAppDialog.showAlertDialog(
context: context,
titleText: 'Tips',
subtitleText:
'- Swipe left or right to see more photos/videos.\n- Tap on photo to see enlarge view.\n- Rotate phone horizontally to see video on full screen.');
},
),
],
)
: null,
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
// color: Colors.black,
),
child: Center(
child: (_filesPathList.length > 0)
? CarouselSlider(
carouselController: _carouselController,
options: CarouselOptions(
height: heightWrapper,
viewportFraction: 1.0,
initialPage: _activeFileIndex!,
enableInfiniteScroll: false,
enlargeCenterPage: false,
onPageChanged: customcallbackFunction,
// autoPlay: false,
),
items: _filesPathList.map((mapFilePath) {
if (_activeFilePath.toString().indexOf('youtube.com') !=
-1) {
// video case
if (_yTPlayerController != null) {
return Container(
// color: Colors.black,
padding: EdgeInsets.symmetric(
vertical: (isPortrait)
? (heightWrapper * 0.20)
: 0.0),
child: Hero(
tag: _activeFilePath.toString(),
child: YoutubePlayer(
controller: _yTPlayerController!,
showVideoProgressIndicator: true,
progressIndicatorColor: CONST_APP_PRIMARY_COLOR,
aspectRatio: 1,
),
),
);
} else {
return Container(
width: 200.0,
height: 200.0,
child: Text('player not found'),
);
}
} else {
// photo case
return Container(
child: (mf.isValidUrl(_activeFilePath!))
? InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PhotoEnlargeViewScreen(
photoPath: _activeFilePath!),
),
);
},
child: Hero(
tag: _activeFilePath.toString(),
child: CachedNetworkImage(
imageUrl: _activeFilePath!,
placeholder: (context, url) =>
new CustomerLoaderCircularProgressIndicatorWidget(),
errorWidget: (context, url, error) =>
new Icon(Icons.error),
),
),
)
: Image.asset(
'assets/images/person04.jpg',
alignment: Alignment.center,
fit: BoxFit.cover,
),
);
}
}).toList(),
)
: Container(
child: CustomerLoaderCircularProgressIndicatorWidget(),
),
),
),
),
);
}
}
请分享您的建议，我们将不胜感激。非常感谢。