I have PageView with photo, and i want open photos from my PageView to fullscreen, when i click on photo, how can i make it?
my code:
class BannerItem extends StatelessWidget {
final AppBanner appBanner;
const BannerItem({Key? key, required this.appBanner}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 14.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(appBanner.url), fit: BoxFit.cover)),
);
}
}
CodePudding user response:
1: Add the photo_view package, which offers zoom in/out/scaling image functionality, by running flutter pub add photo_view
command.
2: Add the below class to your app
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
class PhotoViewPage extends StatelessWidget {
final String imageUrl;
const PhotoViewPage(
{super.key, required this.imageUrl});
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: const IconThemeData(color: Colors.white),
elevation: 0,
backgroundColor: Colors.transparent,
),
body: PhotoView(
imageProvider: CachedNetworkImageProvider(imageUrl),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 1.8,
initialScale: PhotoViewComputedScale.contained,
),
);
}
}
3: Finally, wrap the Container
in your BannerItem
class with the Inkwell
widget and set the onTap
to:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PhotoViewPage(imageUrl: appBanner.url),
),
)
...or simply update your BannerItem
class with this updated code:
class BannerItem extends StatelessWidget {
final AppBanner appBanner;
const BannerItem({Key? key, required this.appBanner}) : super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PhotoViewPage(imageUrl: appBanner.url),
),
),
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 14.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(appBanner.url), fit: BoxFit.cover),
),
),
);
}
}
CodePudding user response:
You define Inkwell
like this:
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (c)=> FullImage));
},
child: Container(
margin: EdgeInsets.symmetric(horizontal: 14.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(appBanner.url), fit: BoxFit.cover)),
),
);
and after that define another class like this:
import 'package:flutter/material.dart';
class FullImage extends StatelessWidget {
const FullImage({Key? key,required this.url}) : super(key: key);
final String url;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.black,
alignment: Alignment.center,
child: Image.network(
url,
),
),
);
}
}