flutterflutter-layoutflutter-layoutbuilder

onPressed of an Image I want to place that image in other page's container in flutter, How can I achieve this?


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,


Solution

  • 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.

    Refer the link for more details