Show full screen image on tap flutter (Hero)

Question

I have the image shown using network to local file

Hero(
                           tag: "customWidget",
                           child: Container(
                             width: context.screenWidth / 2,
                             height: context.screenHeight / 4,
                             child: NetworkToLocal(
                               mediaURL: element.payload.uri,
                               mediaType: 'image',
                             ),
                           ),
                         ),

I want to add functionality that after tapping on the image I can present this image in fullscreen mode. How it can be done with the hero widget?

In the above screenshot, an error occurs highlighting elements when adding

                       child: NetworkToLocal(
                            mediaURL: element.payload.uri,
                            mediaType: 'image',
                          ),

Ravindra S. Patil · Answer 1 · 2021-07-08T09:06:49.813

2

You use the Hero Animation

import 'package:flutter/material.dart';

void main() => runApp(HeroApp());

class HeroApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Transition Demo',
  home: MainScreen(),
 );
}
}

class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Main Screen'),
  ),
  body: GestureDetector(
    onTap: () {
      Navigator.push(context, MaterialPageRoute(builder: (_) {
        return DetailScreen();
      }));
    },
    child: Hero(
      tag: 'imageHero',
      child: Image.network(
        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
      ),
    ),
  ),
);
}
}

class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  body: GestureDetector(
    onTap: () {
      Navigator.pop(context);
    },
    child: Center(
      child: Hero(
        tag: 'imageHero',
        child: Image.network(
          'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
        ),
      ),
    ),
  ),
);
}
}

edited Jul 08 '21 at 09:06

answered Jul 08 '21 at 08:34

Ravindra S. Patil

11,757
3
13
40

You forgot to add a key on hero widget!) In addition, please expand your answer, i.o hero animation on both screens. – Atamyrat Babayev Jul 08 '21 at 08:40
@RavindraS.Patil I tried the above example, it doesn't suit my situation. I am not able to use the URL in any other class."mediaURL: element.payload.uri," where in the example above they used network image widget. – S4nj33v Jul 08 '21 at 09:15
I think you don't understand, how does it works. You can't share completed widget between screens. Hero animation only add animation on widgets that have tags on changing between screens. So hero widget in one screen is not the widget from another screen! – Atamyrat Babayev Jul 08 '21 at 09:46
1

If you have some cached image, I think it'll not be a problem to you to get it from cache and show it immediately. – Atamyrat Babayev Jul 08 '21 at 09:47
Thank you for answering me. will go through the Hero widget. – S4nj33v Jul 08 '21 at 10:39
added an error above check edited question, please... – S4nj33v Jul 08 '21 at 11:14
@sanjeevAV, Replace **mediaURL: element.payload.uri,** to this `https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png` (mediaURL:"your image URL") – Ravindra S. Patil Jul 08 '21 at 11:26
@RavindraS.Patil, It is not working for me. It displays some issues on the screen. – S4nj33v Jul 08 '21 at 12:14
@sanjeevAV, I first thing tell me why you used ** NetworkToLocal** remove it and use just Hero please try to run my answer – Ravindra S. Patil Jul 08 '21 at 12:17
I used "NetworkToLocal" to avoid caching the image every time. (Using in a chat app) – S4nj33v Jul 08 '21 at 12:22
No issues with using "NetworkToLocal", Hero widget works well even if I add NetworkToLocal. My issue is I can't use " element.payload.uri, " in any other class. – S4nj33v Jul 08 '21 at 14:11
1

Try to declare element as var element ; OR var element = " "; – Ravindra S. Patil Jul 08 '21 at 14:32
declaring the element as the variable doesn't work. It displays an error on the screen "NosuchMethod: the getter 'payload' was called on null." – S4nj33v Jul 08 '21 at 17:45
Please refer this URL https://www.google.com/amp/s/ghulamustafa.com/2021/05/01/flutter-network-to-local-file-image-audio-video/amp/. And already told you replace element.payload.uri is replace by your url please check my previous comment – Ravindra S. Patil Jul 08 '21 at 17:54

Show full screen image on tap flutter (Hero)

1 Answers1