Question 80038 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter page view, how to open fullscreen photo on click?

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)),
    );
  }
}

enter image description here

Tags:

2

Answers


  1. 0

    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,
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    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),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search