▷Mostrar imagen a pantalla completa enTap en Flutter ✔️ Foro Ayuda 【 2024 】

Luego de tanto luchar hemos dado con la solución de este asunto que algunos usuarios de esta web presentan. Si quieres aportar alguna información no dejes de compartir tu información.

Solución:

¿Dices que quieres algo como en este libro de cocina de aleteo?

import 'package:flutter/material.dart';

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

class HeroApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  


class MainScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
          ),
        ),
        onTap: () 
          Navigator.push(context, MaterialPageRoute(builder: (_) 
            return DetailScreen();
          ));
        ,
      ),
    );
  


class DetailScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
            ),
          ),
        ),
        onTap: () 
          Navigator.pop(context);
        ,
      ),
    );

Puede usar el paquete cache_network_image para mostrar la imagen en caché sin descargarla nuevamente.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

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

class HeroApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  


class MainScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: CachedNetworkImage(
            imageUrl:  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
            placeholder: new CircularProgressIndicator(),
            errorWidget: new Icon(Icons.error),
          )
        ),
        onTap: () 
          Navigator.push(context, MaterialPageRoute(builder: (_) 
            return DetailScreen();
          ));
        ,
      ),
    );
  


class DetailScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: CachedNetworkImage(
              imageUrl:  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
          ),
        ),
        onTap: () 
          Navigator.pop(context);
        ,
      ),
    );

Mi versión final (con pantalla completa real):

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/services.dart';

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

class HeroApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  


class MainScreen extends StatefulWidget 
  @override
  _MainScreenState createState() => _MainScreenState();


class _MainScreenState extends State 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
            tag: 'imageHero',
            child: CachedNetworkImage(
              imageUrl:
                  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            )),
        onTap: () 
          Navigator.push(context, MaterialPageRoute(builder: (_) 
            return DetailScreen();
          ));
        ,
      ),
    );
  


class DetailScreen extends StatefulWidget 
  @override
  _DetailScreenState createState() => _DetailScreenState();


class _DetailScreenState extends State 
  @override
  initState() 
    SystemChrome.setEnabledSystemUIOverlays([]);
    super.initState();
  

  @override
  void dispose() 
    //SystemChrome.restoreSystemUIOverlays();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: CachedNetworkImage(
              imageUrl:
                  'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
          ),
        ),
        onTap: () 
          Navigator.pop(context);
        ,
      ),
    );

Pasar datos de la página principal a la de detalles

Solo para completar mi respuesta, agrego un código que muestra cómo puede pasar la URL de la imagen de la página principal a la de detalles.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/services.dart';

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

class HeroApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Image/Detail Demo',
      home: MainScreen(),
    );
  


class MainScreen extends StatefulWidget 
  @override
  _MainScreenState createState() => _MainScreenState();


class _MainScreenState extends State 
  var _url = [
    'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
    'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true'
  ];
  var _tag = ['imageHero', 'imageHero2'];
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: ListView(
        children: [
          GestureDetector(
            child: Hero(
                tag: _tag[0],
                child: CachedNetworkImage(
                  imageUrl: _url[0],
                  placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())),
                  errorWidget: new Icon(Icons.error),
                )),
            onTap: () 
              Navigator.push(context, MaterialPageRoute(builder: (_) 
                return DetailScreen(tag: _tag[0], url: _url[0]);
              ));
            ,
          ),
          GestureDetector(
            child: Hero(
                tag: _tag[1],
                child: CachedNetworkImage(
                  imageUrl: _url[1],
                  placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())),
                  errorWidget: new Icon(Icons.error),
                )),
            onTap: () 
              Navigator.push(context, MaterialPageRoute(builder: (_) 
                return DetailScreen(tag: _tag[1], url: _url[1]);
              ));
            ,
          ),
        ],
      ),
    );
  


class DetailScreen extends StatefulWidget 
  final String tag;
  final String url;

  DetailScreen(Key key, @required this.tag, @required this.url)
      : assert(tag != null),
        assert(url != null),
        super(key: key);

  @override
  _DetailScreenState createState() => _DetailScreenState();


class _DetailScreenState extends State 
  @override
  initState() 
    SystemChrome.setEnabledSystemUIOverlays([]);
    super.initState();
  

  @override
  void dispose() 
    //SystemChrome.restoreSystemUIOverlays();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: widget.tag,
            child: CachedNetworkImage(
              imageUrl: widget.url,
              placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())),
              errorWidget: new Icon(Icons.error),
            ),
          ),
        ),
        onTap: () 
          Navigator.pop(context);
        ,
      ),
    );

ACTUALIZAR

Para volver a tocar el exterior de la imagen, lleve el GestureDetector en el Detail widget.

class _DetailScreenState extends State 
  @override
  initState() 
    SystemChrome.setEnabledSystemUIOverlays([]);
    super.initState();
  

  @override
  void dispose() 
    //SystemChrome.restoreSystemUIOverlays();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return GestureDetector(
      child: Scaffold (
        body: Center(
          child: Hero(
            tag: widget.tag,
            child: CachedNetworkImage(
              imageUrl: widget.url,
              placeholder: Center(child: Container(width: 32, height: 32,child: new CircularProgressIndicator())),
              errorWidget: new Icon(Icons.error),
            ),
          ),
        ),
      ),
      onTap: () 
        Navigator.pop(context);
      ,
    );

¡Puedes usar este código para tener una imagen en pantalla completa!

class DetailScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: GestureDetector(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
        onTap: () 
          Navigator.pop(context);
        ,
      ),
    );

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Mostrar imagen a pantalla completa enTap en Flutter

Solución:

Utiliza Nuestro Buscador

Preguntas Relacionadas: