CODEWITHSUNDEEP
androidflutterdartflutter-widgetlarge-image
S4nj33v
S4nj33v

Reputation: 459

Show full screen image on tap flutter (Hero)

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?Image of error

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

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

image of error message

Upvotes: 1

Views: 3034

Answers (1)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

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

Upvotes: 2

Related Questions