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

how to show large image onclick row flutter?

I have image in a row from a function like this:

_buildSetMenuItemImage() {
    final url = Outlet().baseUrl +
        "/images/${widget.menuItem.imageUrl}";
    return ClipRRect(
      child: Image.network(
        url,
        fit: BoxFit.cover,
        width: 100,
        height: 100,
      ),
    );
  }

when click on image in row (not whole row), it must show large image like this :
image in row

large image after click small image

How to repair the function code so it will show large image when clicked?

Tags:

2

Answers


  1. 0

    you can use a dialog to show image in full screen

    class CustomDialog extends StatelessWidget {
  String imageUrl;
    CustomDialog({required this.imageUrl});
  @override
  Widget build(BuildContext context) {
    return Material(
    child:Container(
      color:Colors.black,
      
      child: Stack(
        children: <Widget>[
      
         Padding(
           padding:EdgeInsets.only(top:120,bottom:120),
         child: Image.network(
                  imageUrl,
                  width:MediaQuery.of(context).size.width,
                  fit:BoxFit.fitWidth
                ),
         ),
              Positioned(
            right:60,
            top:60,
            
          child:IconButton(
            
          icon:Icon(Icons.close,size:70,color:Colors.red),onPressed: (){
              Navigator.of(context).pop();
          })
          ),
        ],
      ),
    )
    );
  }
}

    and can use it like below

     showDialog(
              context: context,
              builder: (BuildContext context) {
                return CustomDialog(imageUrl:"https://picsum.photos/200/300");
              },
            );
    Login or Signup to reply.
  2. 0 
    _buildSetMenuItemImage() {
    final url = Outlet().baseUrl +
        "/images/${widget.menuItem.imageUrl}";
    return GestureDetector(
      onTap: () {
        showDialog(...); // show a dialog like Nikhil explained
      },
      child: ClipRRect(
        child: Image.network(
          url,
          fit: BoxFit.cover,
          width: 100,
          height: 100,
        ),
      ),
    );
  }

    Addition to Nikhil Biju’s code you can modify your code like this. This modify gains an on click event to your image especially.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search