0

buen dia, necesito que al dar clic en la imagen se visualice en modo pantalla completa y que pueda vovler al modo original, he buscado varias formas pero no he logrado que funcione dando un solo click, he revisado el componente InteractiveViewer pero no lo he logrado conseguir ya que funciona es solo para poder scalar la imagen, lo unico que necesito es que al darle clic se muestre en pnatalla completa y tenga alguna opión para volver al modo normal:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: InteractiveViewer(
          child: Image.network(
            'https://yt3.ggpht.com/ytc/AKedOLQkusni0A_miSgASzbS1EO8aob-xanXO8fwRsy18Q=s88-c-k-c0x00ffffff-no-rj',
            fit: BoxFit.cover,
            height: double.infinity,
            width: double.infinity,
            alignment: Alignment.center,
          ),
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

1 respuesta 1

2

Hay muchas formas de hacer eso, se me vienen a la mente AnimatedContainer y Hero.

Te pongo un ejemplo usando el segundo , Hero moviéndose hacia otra página.

class _MyHomePageState extends State<MyHomePage> {
  final imageURL =
      'https://yt3.ggpht.com/ytc/AKedOLQkusni0A_miSgASzbS1EO8aob-xanXO8fwRsy18Q=s88-c-k-c0x00ffffff-no-rj';
  final duration = Duration(seconds: 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                transitionDuration: duration,
                reverseTransitionDuration: duration,
                pageBuilder: (context, animation, _) {
                  return FadeTransition(
                    opacity: animation,
                    child: ImageFullScreen(
                      imageURL: imageURL,
                    ),
                  );
                },
              ),
            );
          },
          child: Hero(
            tag: 'my_image',
            child: Image.network(
              imageURL,
              fit: BoxFit.contain,
              height: 100,
              width: 100,
            ),
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class ImageFullScreen extends StatelessWidget {
  const ImageFullScreen({
    Key key,
    this.imageURL,
  }) : super(key: key);

  final String imageURL;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SizedBox.expand(
        child: Hero(
          tag: 'my_image',
          child: Image.network(
            imageURL,
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

introducir la descripción de la imagen aquí

3
  • me sirve este ejemplo pero necesito plasmarlo en mi proyecto no se si me puedas ayudar yo no he podio, este el repositorio github.com/Giovannychvz/flutter/blob/main/main.dart , la imagen que necesito que al dar clic se vea en toda la pantalla es en la linea 247, te antemano muchas gracias..
    – Giovanny
    Commented el 19 oct. 2021 a las 14:07
  • @Giovanny si te sirvió la respuesta, puedes marcarla como resuelta, si tienes alguna otra duda, puedes crear otra pregunta. Commented el 19 oct. 2021 a las 15:10
  • listo , igual te envio la nueva pregunta si me puedes ayudar, es.stackoverflow.com/questions/491627/…
    – Giovanny
    Commented el 19 oct. 2021 a las 15:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.