I have a Home page for an ecommerce website and I am showing every product in image format on click of every product(image) I want that image to be filled up in next screen which is of info screen of product that also contains the product (image) and some other related stuff. I want to build info page only a single time and just change the product image and other stuff accordingly as per the image (product) being clicked. How can I achieve this I am new to flutter and dont know this logic i came across valuelistenablebuilder but not getting how can i achieve this, Please Help. Thank you,
By default, Flutter is providing this support by using the Hero
widget. Find the code snippets below.
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(
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
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://picsum.photos/250?image=9',
),
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}
Make sure the Hero.tag
property should be maintained as same for both pages.