Image to be seen big onTapping in flutter - flutter

Question

I am getting posts from a wordpress website into a flutter app.
Each post has 3 pictures and this is the layout of the images
What I am trying to do is when I Tap on IMAGE 1 or IMAGE 2 or IMAGE 3, that image will be shown on MAIN IMAGE.
Does it makes sense?

Answer 1

i Hope That Below Code help you. in following code i used network image but you can also used assert images to.
import 'package:flutter/material.dart';
void main() => runApp(new Demo());
class Demo extends StatefulWidget {
#override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> with TickerProviderStateMixin {
String image1 = "http://via.placeholder.com/350x150";
String image2 = "http://via.placeholder.com/200x150";
String image3 = "http://via.placeholder.com/200x150";
String currentMainImage = "http://via.placeholder.com/350x150" ;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: new Text("table demo"),
),
body: new Container(
child: new Column(
children: <Widget>[
Container(
height:150.0,
child: new Image.network(currentMainImage,fit: BoxFit.fill,)
),
new Row(
children: <Widget>[
Expanded(
child: InkWell(
onTap : (){
setState(() {
currentMainImage = image1;
});
},
child: new Image.network(image1)
)
),
Expanded(
child: InkWell(
onTap : (){
setState(() {
currentMainImage = image2;
});
},
child: new Image.network(image2)
)
),
Expanded(
child: InkWell(
onTap : (){
setState(() {
currentMainImage = image3;
});
},
child: new Image.network(image3)
)
),
],
)
],
)
)
)
);
}
}

Answer 2

You need to use a stateful widget
You may use Column and Row to achieve that layout.
And Image to display the images within the layout.
You may specifically use Image.network(url) constructor to show images from your word press site.
The image1, image2 and image3 can be wrapped in a InkWell widget. And InkWell's onTap can have code to update the url/image of the Main Image widget within a setState()
Hope that helps!